嵌套Ajax请求 - 执行顺序问题

我的代码中有2个嵌套的AJAX请求。按下按钮时会触发它们。我正在使用Bootstrap的加载阶段将按钮的文本更改为“加载...”，而AJAX请求正在处理中。嵌套Ajax请求 - 执行顺序问题

问题是在内部AJAX请求完成之前按钮被重置。

我意料的是，外AJAX请求complete回调将在其success回调所有的代码已被执行后，才可以执行，但是这不是发生了什么。

代码的简化版本是这样的：

$('#button').on('click', function() { 
$.ajax({ 
    url: …, 
    type: 'post', 
    data: …, 
    dataType: 'json', 
    beforeSend: function() { 
     $('#button').button('loading'); 
    }, 
    complete: function() { 
     $('#button').button('reset'); 
    }, 
    success: function(json) { 
     if (json['error']) { 
     … 
     } else { 
      $.ajax({ 
       url: …, 
       dataType: 'json', 
       success: function(json) { 
        for (var delayer = 1; delayer < 2000000000; delayer++) {} 
        … 
       }, 
       error: … 
      }); 
     } 
    }, 
    error: … 
});    
});

我创建了任意拖延循环才能够更好地验证我的机器上的影响。它给了我大约2秒的延迟。该按钮几乎立即重置。

这是它应该如何工作，如果不是 - 我该如何解决它？

来源

2017-09-02 Yossif Rahiya

当您的第一个AJAX请求完成时，您的第一个AJAX请求中的complete函数被触发。如果您希望在第二个完成后触发它，请将其移至第二个AJAX请求中。 :)

$('#button').on('click', function() { 
$.ajax({ 
    url: …, 
    type: 'post', 
    data: …, 
    dataType: 'json', 
    beforeSend: function() { 
     $('#button').button('loading'); 
    }, 
    success: function(json) { 
     if (json['error']) { 
     … 
     } else { 
      $.ajax({ 
       url: …, 
       dataType: 'json', 
       complete: function() { 
        $('#button').button('reset'); 
       }, 
       success: function(json) { 
        for (var delayer = 1; delayer < 2000000000; delayer++) {} 
        … 
       }, 
       error: … 
      }); 
     } 
    }, 
    error: … 
});    
});

你感到困惑的原因是因为complete回调在success回调发射相同的时间（大约）解雇。唯一的区别是complete是无论什么结果烧成，而且success当它得到了积极的回应（即HTTP 200 OK）

complete时success完成后，不会触发仅触发。欲了解更多信息请查看jQuery documentation

文档确实说，complete是success执行后被解雇，但这并不意味着所有的success完成complete之前甚至被称为。这与JavaScript中的异步编码有关。

来源

2017-09-02 16:54:53 bugfroggy

感谢您的快速响应！我已经尝试过这个解决方案，并且你是对的，但是在我的情况下它不起作用，因为如果第一个AJAX请求的PHP处理程序在JSON数组中发送错误，我还需要重置该按钮。 –

然后你需要修改你的代码。在你的'if（json ['error']）'语句的前半部分添加'$（'＃button'）。button（'reset'）;'并且希望能够解决你的问题。如果出现错误，它会重置该按钮，或者如果没有错误，则会在第二次AJAX请求后重置该按钮。 – bugfroggy

我试图设置一个小的超时复位功能，如果它有~50毫秒超时，由于某种原因按钮不会在50毫秒后重置，但在成功功能完成后得到重置，这是什么我想要，但没有更好的解决方案吗？ –

嵌套Ajax请求 - 执行顺序问题

回答

相关问题