[英]How can I call multiple asynchronous javascript functions in sequence?
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: 现在使用
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();
});
});
See my question here: About Node's code style 在这里看到我的问题: 关于Node的代码样式
And I provide a helper function for making embedded callbacks called in line. 而且,我提供了一个辅助函数,用于使嵌入式回调直接调用。
It works both for NodeJS and browser JS. 它适用于NodeJS和浏览器JS。
ajaxcall1(parameter, function() {
ajaxcall2(parameter, function() {
ajaxcall3(parameter, function() {
alert("lol");
};
};
});
Explanation: call the 2nd ajax call when the first returns its result and the 3d when the 2nd returns. 说明:在第一个返回其结果时调用第二个ajax调用,在第二个返回时调用3d。
use ajax async false option 使用ajax异步false选项
$.ajaxSetup({ async: false });
// put your three get methods here
$.ajaxSetup({ async: true });
NOTE: this will halts your dynamic page functionality until your total code block's execution completes 注意:这将停止动态页面功能,直到总代码块执行完毕
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.