Question

我对使用AJAX加载部分页面有疑问。

假设用户点击一个按钮进行AJAX调用以加载页面的一部分（它可能包含动态加载的JS和/或CSS），并且html内容被删除在某个div上。然后，在第一次加载完成之前，他点击另一个按钮，该按钮进行另一个AJAX调用，该调用将删除同一div上的其他内容。我该如何防止此行为产生任何冲突？一些可能的冲突可能是这样的，例如，第一次加载在找不到的内容上执行一些JS，因为第二次加载已经改变了div。

提前致谢。

编辑：我会很感激基于异步方法的答案。感谢。

Answer 1

Genesis和Gaurav关于禁用用户互动是正确的。从我到他们每个人+1。你如何处理逻辑实际上非常简单：

$('#my_submit_button').click(function(){
    $.ajax({
        url:'/my_file.php',
        dataType='json',
        beforeSend:function(){
            $('#my_submit_button').prop('disabled',true);
        },
        error: function(jqXHR, status, error){
            // handle status for each: "timeout", "error", "abort", and "parsererror"
            // Show submit button again:
            $('#my_ajax_container').html('Oops we had a hiccup: ' + status);
            $('#my_submit_button').prop('disabled',false);
        },
        success:function(data){
            $('#my_ajax_container').html(data);
            $('#my_submit_button').prop('disabled',false);
        }
    });
});

Answer 2

使其同步（不推荐）
在ajaxing
不介意它

但在你的情况下它不会发生任何冲突，因为当替换html时，脚本也是

Answer 3

只需禁用导致AJAX调用启动但尚未完成的按钮。

Answer 4

我不确定这对你来说实际上是个问题，因为Javascript是单线程的。当第一个ajax响应进来并执行一些javascript时，只要它是一个连续的执行线程（没有定时器或其他异步ajax调用作为其处理的一部分），第二个ajax响应就不会中断该javascript。

让我们来看一个场景：

用户点击按钮 - 首先启动ajax呼叫。
用户点击按钮 - 第二次ajax通话开始。
首先完成ajax调用，然后开始完成代码执行以处理新数据。
当代码从第一个ajax调用执行时，第二个ajax调用完成。此时，浏览器将第二个ajax调用完成放入队列中。它还无法触发您的任何完成代码，因为Javascript引擎仍然在第一次加载时运行。
现在，第一个加载完成了它的执行和代码，并从它的完成处理程序返回。
浏览器现在转到它的队列并找到要处理的下一个事件。它找到第二个ajax调用的完成，然后启动该ajax调用的完成代码。

从这个场景中可以看出，ajax调用重叠，第二个处理过程中第二个完成，但仍然没有冲突，因为Javascript引擎是单线程的。

现在，正如其他答案所暗示的那样，您不希望在用户处理时启动新请求的用户体验，但它们在技术上不会相互冲突。如果要防止重叠呼叫，您可以选择多种工具：

您可以在第一个未完成的通话时阻止开始第二个通话。您可以在UI和实际代码中执行此操作。
当有多个未完成的呼叫时，您可以决定删除/忽略之前的响应而不处理它们 - 只等待最后一个响应。
启动第二个电话时，您可以取消第一个电话。
您可以让第二个替换第一个，如上所述。

前两个选项要求您跟踪一些交叉的ajax-call状态，这样一个ajax调用就可以知道是否有其他的并且相应地采取行动。

使用AJAX进行动态页面提取

4 个答案: