如何强制一个AJAX请求等待另一个请求完成

How to force one AJAX request to wait to finish for another?

本文关键字：请求 等待 另一个 AJAX 一个 何强制      更新时间：2023-09-26

我正在制作一款使用大量AJAX调用来更新，保存，编辑保存游戏等的游戏

事情是，似乎随后启动的AJAX请求不像我想要的那样排队。

例如，我正在检查服务器端是否允许操作，所以我需要当前保存游戏。在保存游戏之前发送，但是检查请求在保存游戏请求完成之前执行。

所以我希望它是这样的:

AJAX start: Save Game
AJAX finish: Save Game
AJAX start: Check
AJAX finish: Check
AJAX start: Save Game
AJAX finish: Save Game

目前是这样的:

AJAX start: Save Game
AJAX start: Check
AJAX finish: Save Game
AJAX start: Save Game
AJAX finish: Check
AJAX finish: Save Game

即使按时间顺序触发AJAX调用也是正确的。他们只需要等待，直到之前触发的调用结束。

有没有办法在全球范围内实现这一目标?因为问题是大多数调用不知道其他请求。

我可以在没有setInterval调用检查请求是否完成的情况下完成这项工作吗?

UPDATE:显然，我没有解决实际问题。我知道这是因为AJAX是异步的。

但是我需要这些保持在队列中。同样在运行时，我不知道什么调用在什么时候被触发，因为这都是依赖于用户动作的。所以我不能在save请求之后调用check请求，因为我不知道用户是否触发了需要调用check请求的操作。

所以我需要一个全局实现，ajax请求总是等待他们的执行，直到每个预先存在的请求完成。

所以我希望这些调用是异步的(不冻结UI等)，但在执行顺序方面是"同步"的。

有一个非常有用的jquery插件ajaxQ，它允许你创建一个ajax请求队列

$.ajaxq ("MyQueue", {
    url: 'http://jsfiddle.net/echo/jsonp/',
    type: 'post',
    dataType: "jsonp"
});

我认为最好为自己创建一个add-to-queue函数，如下所示:

function AddRequest(name, url, postData) {
var jqXHR = $.ajaxq(name, {
    url: url,
    type: 'POST',
    contentType: "application/x-www-form-urlencoded",
    data: postData,
    beforeSend: function () {
        //do stuff
    },
    error: function (response) {
        //do stuff
    },
    complete: function (response) {
        //do stuff
    },
    success: function (response) {
        //do stuff
    }
});
}

你可以这样调用:

var myurl = "http://www.example.com/myaction";
var postData = "myparam1=one&myparam2=two";
AddRequest('myAjaxQueue', myurl, postData);

如果你正在使用jQuery的$.ajax()或$.post()或$.get()，使用回调开始下一个!如:

console.log("AJAX start: Save Game");
$.post("save-game.php", function(){
    console.log("AJAX finish: Save Game");
    console.log("AJAX start: Check");
    $.post("check.php", function(){
        console.log("AJAX finish: Check");
        // Iterate from here using a recursive function! :P
    });
});

你可以这样做:

function saveCheckGame()
{
    console.log("AJAX start: Save Game");
    $.post("save-game.php", function(){
        console.log("AJAX finish: Save Game");
        console.log("AJAX start: Check");
        $.post("check.php", function(){
            console.log("AJAX finish: Check");
            saveCheckGame();
        });
    });
}

一种方法是使用第一个请求的回调来启动下一个请求。

一个更简洁的解决方案是在回调中设置一个事件，并在事件触发时运行第二个请求。

在第一个请求回调

$( document ).trigger( "request1Finished" );

附加事件处理程序

$( document ).on( "request1Finished", function() {
    // run next request
});

在这里您可以找到一个有趣的方面异步ajax调用。但是我认为你应该考虑jQuery .promise()。它有等待和执行的能力。你可以在docs上找到更多细节。

阅读这个和jQuery ajax文档也。

相关文章：