javascript - 多次 Ajax 调用，一次回调

Question

我目前正在使用 CakePHP-Framework 开发 Web 应用程序。您可以查看平面图，也可以将用户从一个座位拖放到另一个座位。

一些背景信息:

当我打开平面图时，我在源代码中生成了一个隐藏变量，其中列出了所有用户及其设备，例如:

var users = "user1,user2,user3"

当有人想保存用户在平面图上的位置时，他们调用这个方法:

function getPositions() {
   $.each(users.split(","), function(i, user) {
       setPosition('#u'+user, 'us');
   });
}

他们将 ajax 方法称为“setPosition”:

function setPosition(object, type) {
    var dataX = { "positions": [] };

    var position = $(object).offset();
    dataX.positions.push({
        "object"   : object,
        "posx"     : position.left,
        "posy"     : position.top
    });

    $.ajax("/CakePHP/seats/Rooms/Save/" + type,
    {
        type : 'post',
        data : dataX
    });
}

如您所见，此方法被调用了 x 次(x = 平面图上的用户数)。 当然，我不想告诉用户 x 次该功能已成功。

我需要什么: 一个提醒用户楼层平面图已保存(或错误)

Answer 1

您可以使用 $.when 在多个 AJAX 请求完成时执行一些逻辑。试试这个:

var requests = []; // array to store all requests.

function getPositions() {
    $.each(users.split(","), function(i, user) {
        setPosition('#u'+user, 'us');
    });

    $.when.apply($, requests).done(function() {
        console.log('Requests completed...');
    });
}

function setPosition(object, type) {
    var dataX = { "positions": [] };

    var position = $(object).offset();
    dataX.positions.push({
        "object"   : object,
        "posx"     : position.left,
        "posy"     : position.top
    });

    // add the request to the array
    requests.push($.ajax("/CakePHP/seats/Rooms/Save/" + type, {
        type : 'post',
        data : dataX
    }));
}