Javascript 如何处理多个快速jqueryajax提交

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

---

主要问题是，当用户快速选中多个复选框时，大多数复选框都没有被选中，更糟糕的是，一些复选框保存在数据库中，而另一些则没有，以某种不可预测的方式保存

---

关于如何处理这个问题有什么见解吗？我是否可以轻松地将请求排队，或者将所有请求合并到一个请求中？我想要一个有点像google keep web界面的东西

我会这样处理这个场景：

---

用户复选框->复选框被选中->ajax激发->如果响应成功，则保持选中状态；否则，取消选中并显示服务器响应中的错误

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

不过，您可以轻松地实现一种串行执行请求的队列方法，如下所示。警告未经测试

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
    // ...
});

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();
})

---

在一个很酷的世界里，我会使用承诺而不是回调，但对于未经培训的JS eye来说，这是一个更好的例子。

Polywhill先生是对的，不要为每个动作发送一个请求。相反，我将添加一个函数，该函数自上次调用该函数以来，仅在经过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);
    };
};

您应该能够像这样使用它：

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

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();
})

---

当用户快速选中多个复选框时，大多数复选框都不会被选中。。。。重点是什么。？只有在选中时，ajax才能正常工作？如果用户在一段时间内多次单击，请添加一个计时器以捆绑请求。浏览器调试控制台中是否有某些东西，例如firebug？更新需要多长时间？你在使用会话吗？-4？这个问题怎么了？@watcher:很好的解决方案。并且是实用JavaScript示例的重要参考。