将Deferred与AJAX结合使用

Using Deferred with AJAX

本文关键字：结合 AJAX Deferred      更新时间：2023-09-26

我有一系列使用ajax进行数据库调用的js函数，在转到最后一个函数之前，我需要它们完成并更新变量。我正在尝试使用jquery$.，但没有运气。。。在所附的jsfiddle中，您可以看到在更新两个主要函数之前显示了最终函数结果。

http://jsfiddle.net/b20hvyyp/

var x1 = '%';
var x2 = '%';
main();
function main(){
    logProgress('start');
    $.when(a(), b()).done(logProgress(x1 + x2));
}
// called by main()
function a() {
    return $.ajax("/echo/html").pipe(function(data){
            function changex1 () {
            x1 = 'x1Changed';
        };
        setTimeout(changex1(),2000);
        logProgress(x1);
    });
}
// called by a()
function b() {
        return $.ajax("/echo/html").pipe(function(data){
            function changex2 () {
            x2 = 'x2Changed';
        };
        setTimeout(changex2(),5000);
        logProgress(x2);
    });
}
function logProgress(message){
    $('#progress').append('<li>'+message+'</li>');
}

任何帮助都将不胜感激！！

这里需要注意两件事。函数a（）&b（）从ajax调用返回延迟对象。一旦ajax调用完成，这些延迟的对象就会得到解决。因此，您无法检测超时回调的执行情况。接下来是，when（）函数获取一个延迟对象列表，并返回一个单个延迟对象，一旦所有输入的延迟对象都被解析，该对象就会被解析。因此，返回deferred的when（）上的done函数应该得到一个回调函数，而不是像logProgress（x1+x2）这样的语句。以下是经过修改的链接：链接

var x1 = '%';
var x2 = '%';
main();
function main(){
    logProgress('start');
    console.log('asdf')
    $.when(a(), b()).done(function() {
    logProgress(x1 + x2)
    });
//  a().done(function(){
//    logProgress(x1 + x2);
//  });
}
// called by main()
function a() {
	logProgress('a called');
  return $.ajax("/echo/html").pipe(function(data){
    function changex1 () {
	  	x1 = 'x1Changed';
    };
    
    changex1();
    logProgress(x1);
  });
}
// called by a()
function b() {
	logProgress('b called')
  return $.ajax("/echo/html").pipe(function(data){
    function changex2 () {
	  	x2 = 'x2Changed';
    };
    
    changex2();
    logProgress(x2);
  });
}
function logProgress(message){
    $('#progress').append('<li>'+message+'</li>');
}
<ul id="progress">
</ul>

根据Deffered文档，您的代码应该是这样的：

var d1 = $.Deferred();
var d2 = $.Deferred();
main();
function main(){
    logProgress('start');
    $.when( d1, d2 ).done(function ( x1, x2 ) {
      logProgress(x1 + x2)
    });
    a();
    b();
}
// called by main()
function a() {
  return $.ajax("/echo/html").then(function(data){
        x1 = 'x1Changed';
        logProgress(x1);
      d1.resolve(x1);
  });
}
// called by a()
function b() {
  return $.ajax("/echo/html").then(function(data){
        x2 = 'x2Changed';
        logProgress(x2);
      d2.resolve(x2);
  });
}
function logProgress(message){
    $('#progress').append('<li>'+message+'</li>');
}

当预期Defereds时，Defereds应该被解析为rejected，我不知道你为什么使用超时，因为它们确实导致x1和x2的执行设置延迟到主函数之后

相关文章：