我怎样才能调用序列多个异步JavaScript函数？ [英] How can I call multiple asynchronous javascript functions in sequence?

问题描述

我想依次调用下面的功能，但他们不一定以正确的顺序返回。

然后我学到了异步函数可以使用顺序回调被调用。

我怎样才能让这些功能的使用回调执行顺序？

<$p$p><$c$c>$.getJSON('http://localhost/search_data.php?title='+title+'&run=annotations&jsoncallback=?',功能（R1）{
    $。每个（make_all_titles3（R1），功能（I，V）{
        $ vpl.append（五）;
    }）;
}）;$ .getJSON（HTTP：//localhost/search_data.php标题='+标题+'和;运行= LINK＆安培; jsoncallback =？'，函数（R2）{
    $。每个（make_all_titles3（R2），功能（I，V）{
        $ vpl.append（五）;
    }）;
}）;$.getJSON('http://localhost/search_data.php?title='+title+'&user='+user+'&run=bookmarks&jsoncallback=?',功能（R3）{
    $。每个（make_all_titles3（R3），功能（I，V）{
        $ vpl.append（五）;
    }）;
}）;$ vpl.append（'＆LT; D​​IV＆GT;相关条款和LT; / DIV＆GT;'）;$ .getJSON（'HTTP：//localhost/context-search.php标题='+标题+'和; jsoncallback =？'，函数（R4）{
    $。每个（make_all_titles3（R4），功能（I，V）{
        $ vpl.append（五）;
    }）;
}）;

解决方案

最简单的解决办法是简单地嵌套调用。向下滚动一个干净和可读性的解决方案。

 函数_process（R）{
    $。每个（make_all_titles3（R），功能（I，V）{
        $ vpl.append（五）;
    }）;
}$ .getJSON（'HTTP：//localhost/search_data.php标题='+标题+'和;运行=注释和放大器; jsoncallback =？，功能（R）{
    _process（R）;
    $ .getJSON（HTTP：//localhost/search_data.php标题='+标题+'和;运行= LINK＆安培; jsoncallback =？，功能（R）{
        _process（R）;
        $ .getJSON（'HTTP：//localhost/search_data.php标题='+标题+'和;用户='+用户+'和;运行=书签和放大器; jsoncallback =？，功能（R）{
            _process（R）;
            $ vpl.append（'＆LT; D​​IV＆GT;相关条款和LT; / DIV＆GT;'）;
            $ .getJSON（'HTTP：//localhost/context-search.php标题='+标题+'和; jsoncallback =？，功能（R）{
                _process（R）;
            }）;
        }）;
    }）;
}）;
 

现在干净和可读性之一，使用 异步 库：

 无功负荷= [
    网址：{url：HTTP：//localhost/search_data.php标题='+标题+'和;运行=注释和放大器; jsoncallback =？，前日期null}，
    网址：{url：HTTP：//localhost/search_data.php标题='+标题+'和;运行= LINK＆安培; jsoncallback =？，前日期null}，
    网址：{url：HTTP：//localhost/search_data.php标题='+标题+'和;用户='+用户+'和;运行=书签和放大器; jsoncallback =？，前日期null}，
    网址：{url：HTTP：//localhost/context-search.php标题='+标题+'和; jsoncallback =？'，在此之前：函数（）{$ vpl.append（'＆LT; D​​IV＆GT;相关条款和LT; / DIV＆GT;'）; }}
];async.forEachSeries（负载，功能（项目旁）{
    如果（item.before）{
        item.before（）;
    }
    $ .getJSON（item.url，功能（R）{
        $。每个（make_all_titles3（R），功能（I，V）{
            $ vpl.append（五）;
        }）;
        下一个（）;
    }）;
}）;
 

I am trying to call the following functions sequentially, but they don't necessarily return in the correct order.

I then learned about asynchronous functions which can be called sequentially using "callbacks".

How can I make these functions execute in sequence using callbacks?

$.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);     
    });
});

解决方案

The easiest solution would be simply nesting the calls. Scroll down for a clean and readable solution.

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);
            });
        });
    });
});

Now the clean and readable one, using the async library:

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();
    });
});

这篇关于我怎样才能调用序列多个异步JavaScript函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！