jQuery Ajax 同步锁答案

【问题标题】：jQuery Ajax SyncLockjQuery Ajax 同步锁
【发布时间】：2023-03-25 20:46:01
【问题描述】：

我有几个按钮，用户可以单击这些按钮来使用 jQuery 的 $.ajax 加载内容。所有按钮都将内容加载到同一个 div 标签中。问题是，如果用户快速点击多次，内容可能会闪烁几次，然后才能登陆正确的内容。

对此我有什么解决方法？我正在考虑类似于.net 的 SyncLock 功能，但在 javascript/jQuery 中。理想的解决方案是取消当前队列中的请求并启动新的请求。

需要注意的一点是，可能有多个不相关的 ajax 请求正在进行，所以我无法清除所有请求，只清除与这个 div 标签相关的请求。

【问题讨论】：

标签： jquery ajax synclock

【解决方案1】：

清除/取消请求是一项昂贵的任务，因此如果您真的需要它，请不要这样做。它也不会停止服务器端的执行，只需关闭httprequest即可。

您应该做的是设置一个“锁定”并相应地锁定和解锁它。比如：

var working = false;

function startAjax() {
    working = true;
    // do ajax and wait for callback()
}

function callback() {
    working = false;
}

在按钮 .click() 中确保在实际执行之前检查是否工作：

$("#thebutton1, #thebutton2").click(function() {
    if(working) {
        alert("Im in the middle of something");
    } else {
        // execute...
    }
});

【讨论】：

我喜欢这种方法，因为我可以通知用户一个请求已经在执行。
我在 .ajax 调用中使用了 beforeSend 函数来设置锁定标志变量，效果很好
beforeSend 应该可以工作并且还可以稍微清理调用代码。好点子！

【解决方案2】：

您可以做的是让所有将输出发送到同一 div 的按钮的单击事件禁用该按钮。然后在 AJAX 回调中，一旦你处理了响应，你就可以重新启用它们。

【讨论】：