jquery - 如果在 jQuery 中多次单击，则排队功能

Question

我正在制作一个按钮，该按钮在单击时提交 AJAX 请求以更新购物车。

问题是，如果用户快速连续单击 a 多次，脚本将无法更新它（例如，在 2 秒内单击 10 次，只添加了两次）。

我想知道是否有排队的ajax请求？

Answer 1

是的，您可以将 ajax 请求排队，但我更喜欢在请求完成之前禁用该按钮。

浏览器会自动排队ajax请求，但不保证顺序，只是最终都会执行。

如果您需要它们按顺序运行，我通过 google 找到了http://code.google.com/p/jquery-ajaxq/，这是一个向 ajax 请求添加队列并确保它们按顺序运行的插件一次不止一个。

对于禁用的按钮，请确保向 ajax 请求添加超时，如果请求超时，则重新启用该按钮。

Answer 2

您可以通过以下方式实现一个简单的队列：

var lock = false, queue = [];
$('#submitButton').click(function (event) {
    var data = ExtractRequestData(); // This function is what you do to get the data you want to send
    PerformRequest(data);
});

function PerformRequest(data) {
    if (!lock) {
        lock = true;
        $.ajax(// perform ajax request
            complete: function (data) {
                // Complete handler
                lock = false;
                if (queue.length > 0) {
                    PerformRequest(queue.shift());
                }
            }
    } else {
        qeueu.push(data);
    }
}

这保证了您在每个请求完成后按顺序执行请求。