Question

我的网站上有一个复选框列表。每次单击一个框时，ajax脚本都会向服务器提交数据并将条目状态保存在数据库中，然后，在done方法上，将检查该框。

主要问题是当用户快速检查多个方框时，大多数方框都没有被检查，更糟糕的是，有些是保存在数据库中，有些则没有，有些不可预测。

有关如何处理的任何见解？有什么我可以轻松地排队请求，或者可能将所有请求加入一个请求？我想要一些像google keep web界面的东西。

Answer 1

先生。 Polywhirl是对的，不要为每个动作发送一个请求。相反，我会添加一个debounce函数，该函数在上次调用函数后经过xxx毫秒后才会触发一次。

David Walsh的辩护功能（与上面相关）：

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

你应该能够使用它：

var data = [];
var sendRequest = debounce(sendAjaxRequest, 200);

function sendAjaxRequest() {
    $.ajax({ /* Send Ajax Request */ });
    // Empty out the data array
    data = [];
}

// Add data to the array whenever your checkbox is clicked and 
// queue up the ajax request
$('.element').on('click', function() {
    data[] = $(this).data('my-data');
    sendRequest();
})

Answer 2

我会像这样处理这种情况：

用户复选框 - ＆gt;框被检查 - ＆gt; ajax fires - ＆gt;如果响应成功，请保持检查;否则，取消选中并显示服务器响应中的错误

Answer 3

为了获得更好的用户体验，我会在用户点击它时立即选中该框，并将请求匿名发送到服务器。否则，用户不得不等待往返时间的视觉反馈，这通常不是那么好。

然而，您可以轻松实现一种队列：按顺序执行请求＆＃34;顺序＆＃34;，就像这样。（警告未经测试）

var queue = [];
var processing = false;

function queueRequest(data, cb){
    // Queue data to be send to the backend
    // Also cb will be called after it's done
    queue.push({
        data: data,
        cb: cb
    });
    processQueue();
}

function processQueue(immediate) {
    // If we have an empty queue, we are done!
    if (queue.length === 0) {
        processing = false;
        return;
    }

    if (!processing || immediate) {
        var item = queue.shift();   // Take first item
        processing = true;

        // Send the ajax  request
        $.ajax({
            url: "backend.com/checks",
            data: item.data,
            type: 'post',
            success: function(res) {
                if (typeof item.cb === "function")
                    cb(res);

                // Go on with the queue
                processQueue(true); // We call ourself, so it's "immediate"
            }
        });
    }
}

然后将要发送的数据排队，如下所示：

queueRequest({checkbox:5}, function(res){
    // Check the checkbox here, or do w/e you want
    // ...
});

在一个很酷的世界中我会使用promises而不是回调，但对于未经训练的JS眼来说，这是一个更好的例子。

如何处理多个快速jQuery ajax提交

3 个答案: