Question

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

问题是在内部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秒的延迟。该按钮几乎立即重置。

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

Answer 1

第一个AJAX请求中的complete函数在第一个AJAX请求完成时被触发。如果您希望在第二个完成后触发它，只需将其移动到第二个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在{{1}之前完成甚至被称为。这与JavaScript中的异步编码有关。

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

1 个答案: