如何使所有 AJAX 调用按顺序进行? [英] How to make all AJAX calls sequential?

问题描述

我使用 jQuery.而且我不想在我的应用程序上进行并行 AJAX 调用，每次调用都必须在开始之前等待前一个调用.如何实施?有帮手吗?

I use jQuery. And I don't want parallel AJAX calls on my application, each call must wait the previous before starting. How to implement it? There is any helper?

UPDATE 如果有任何同步版本的 XMLHttpRequest 或 jQuery.post 我想知道.但是顺序 != 同步，我想要一个异步和顺序的解决方案.

UPDATE If there is any synchronous version of the XMLHttpRequest or jQuery.post I would like to know. But sequential != synchronous, and I would like an asynchronous and sequential solution.

推荐答案

有一种比使用同步 ajax 调用更好的方法.Jquery ajax 返回一个延迟，因此您可以使用管道链接来确保每个 ajax 调用在下一次运行之前完成.这是一个工作示例，其中包含一个更深入的示例，您可以在 jsfiddle 上玩玩.

There's a much better way to do this than using synchronous ajax calls. Jquery ajax returns a deferred so you can just use pipe chaining to make sure that each ajax call finishes before the next runs. Here's a working example with a more in depth example you can play with on jsfiddle.

// How to force async functions to execute sequentially 
// by using deferred pipe chaining.

// The master deferred.
var dfd = $.Deferred(),  // Master deferred
    dfdNext = dfd; // Next deferred in the chain
    x = 0, // Loop index
    values = [], 

    // Simulates $.ajax, but with predictable behaviour.
    // You only need to understand that higher 'value' param 
    // will finish earlier.
    simulateAjax = function (value) {
        var dfdAjax = $.Deferred();

        setTimeout(
            function () {
                dfdAjax.resolve(value);
            },
            1000 - (value * 100)
        );

        return dfdAjax.promise();
    },

    // This would be a user function that makes an ajax request.
    // In normal code you'd be using $.ajax instead of simulateAjax.
    requestAjax = function (value) {
        return simulateAjax(value);
    };

// Start the pipe chain.  You should be able to do 
// this anywhere in the program, even
// at the end,and it should still give the same results.
dfd.resolve();

// Deferred pipe chaining.
// What you want to note here is that an new 
// ajax call will not start until the previous
// ajax call is completely finished.
for (x = 1; x <= 4; x++) {

    values.push(x);

    dfdNext = dfdNext.pipe(function () {
        var value = values.shift();
        return requestAjax(value).
            done(function(response) {
                // Process the response here.

            });

    });

}

有些人评论说他们不知道代码的作用.为了理解它，您首先需要了解 javascript 承诺.我很确定 promises 很快就会成为原生 javascript 语言功能，所以这应该会给你一个很好的学习动力.

Some people have commented they have no clue what the code does. In order to understand it, you first need to understand javascript promises. I am pretty sure promises are soon to be a native javascript language feature, so that should give you a good incentive to learn.

这篇关于如何使所有 AJAX 调用按顺序进行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！