如何按顺序调用多个异步 JavaScript 函数

How can I call multiple asynchronous javascript functions in sequence?

本文关键字：异步 JavaScript 函数 何按 顺序调用      更新时间：2023-09-26

我正在尝试按顺序调用以下函数，但它们不一定以正确的顺序返回。

然后，我了解了可以使用"回调"按顺序调用的异步函数。

如何使用回调使这些函数按顺序执行？

$.getJSON('http://localhost/search_data.php?title='+title+'&run=annotations&jsoncallback=?', function(r1){
    $.each(make_all_titles3(r1), function (i,v) {
        $vpl.append(v);     
    });
});
$.getJSON('http://localhost/search_data.php?title='+title+'&run=Link&jsoncallback=?', function(r2){
    $.each(make_all_titles3(r2), function (i,v) {
        $vpl.append(v);     
    });
});
$.getJSON('http://localhost/search_data.php?title='+title+'&user='+user+'&run=bookmarks&jsoncallback=?', function(r3){
    $.each(make_all_titles3(r3), function (i,v) {
        $vpl.append(v);     
    });
});
$vpl.append('<div>Related Terms</div>');
$.getJSON('http://localhost/context-search.php?title='+title+'&jsoncallback=?', function(r4){
    $.each(make_all_titles3(r4), function (i,v) {
        $vpl.append(v);     
    });
});

最简单的解决方案是简单地嵌套调用。向下滚动以获得干净且可读的解决方案。

function _process(r) {
    $.each(make_all_titles3(r), function (i, v) {
        $vpl.append(v);
    });
}
$.getJSON('http://localhost/search_data.php?title=' + title + '&run=annotations&jsoncallback=?', function (r) {
    _process(r);
    $.getJSON('http://localhost/search_data.php?title=' + title + '&run=Link&jsoncallback=?', function (r) {
        _process(r);
        $.getJSON('http://localhost/search_data.php?title=' + title + '&user=' + user + '&run=bookmarks&jsoncallback=?', function (r) {
            _process(r);
            $vpl.append('<div>Related Terms</div>');
            $.getJSON('http://localhost/context-search.php?title=' + title + '&jsoncallback=?', function (r) {
                _process(r);
            });
        });
    });
});

现在干净易读的，使用 async 库：

var load = [
    { url: 'http://localhost/search_data.php?title=' + title + '&run=annotations&jsoncallback=?', before: null },
    { url: 'http://localhost/search_data.php?title=' + title + '&run=Link&jsoncallback=?', before: null },
    { url: 'http://localhost/search_data.php?title=' + title + '&user=' + user + '&run=bookmarks&jsoncallback=?', before: null },
    { url: 'http://localhost/context-search.php?title=' + title + '&jsoncallback=?', before: function() { $vpl.append('<div>Related Terms</div>'); } }
];
async.forEachSeries(load, function(item, next) {
    if(item.before) {
        item.before();
    }
    $.getJSON(item.url, function(r) {
        $.each(make_all_titles3(r), function (i, v) {
            $vpl.append(v);
        });
        next();
    });
});

在这里看我的问题：关于 Node 的代码风格
我提供了一个帮助程序函数，用于进行内线调用的嵌入式回调。
它适用于NodeJS和浏览器JS。

ajaxcall1(parameter, function() {
    ajaxcall2(parameter, function() {
        ajaxcall3(parameter, function() {
            alert("lol");
        };
    };
});

说明：当第一个调用返回其结果时调用第二个 ajax 调用，当第二个返回结果时调用 3d。

使用 ajax 异步 false 选项

$.ajaxSetup({ async: false });
    // put your three get methods here
$.ajaxSetup({ async: true });

注意：这将停止您的动态页面功能，直到您的总代码块的执行完成

相关文章：