jQuery Ajax SyncLock

Question

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

对于此问题，我有什么解决方法？我在想一些类似于.Net的SyncLock特性的东西，但用的是javascript/jQuery。理想的解决方案是取消当前队列中的请求，然后启动新的请求。

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

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

Answer 2

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