Question

我有一个动态网站，其中包含大量AJAX和jQuery，可以在不同的模块中加载到不同的容器中。

出于我的问题的目的，考虑我有3个按钮和一个容器。单击按钮A使用jQuery

将a.php加载到容器中

$('.container').load('a.php');

现在考虑模块b.php是一个需要大约3-4秒才能加载的模块，因为它正在从另一个网站抓取内容并解析它。当我单击按钮B加载模块b.php，然后再次快速单击按钮A以加载模块a.php时，我的问题出现了：模块a.php快速加载到容器中，但加载模块b.php仍在进行中，因此，在另一秒或2-3之后，模块b.php加载到容器中，即使用户上次单击按钮A。

所以这是我的问题：如果用户点击另一个按钮，我怎么能停止加载模块b.php。

注意：作为一种解决方法，我想到在每个模块的加载完成之前禁用按钮。它确实可以防止这个问题，但这不是理想的最终结果。

编辑：所以我看到了这个：Aborting jQuery().load()是的，我可以使用AJAX来实现它。感谢所有建议的人。我希望找到一个实际上与load（）一起使用的答案，但还没有找到一个有效的答案。

Answer 1

通过使用beforeSend，你可以在发送下一个ajax请求之前中止第一个ajax请求，参见示例

<button onclick="onClickBtnA()">A</button>
<button onclick="onClickBtnB()">B</button>

在你的jQuery中

var currentRequest = null; 

function onClickBtnA(){
    currentRequest = $.ajax({
        url: 'AJAX_URL_1',
        beforeSend : function() {           
            if(currentRequest != null) {
                currentRequest.abort();
            }
        },
        success: function(data) {
            //do something
        }
    });
}

function onClickBtnB(){
    currentRequest = $.ajax({
        url: 'AJAX_URL_2',
        beforeSend : function()    {           
            if(currentRequest != null) {
                currentRequest.abort();
            }
        },
        success: function(data) {
            //do something
        }
    });
}

Answer 2

如果您想坚持使用load，而不是按照建议执行ajax请求，则可以加载到隐藏的div中，然后使用load的回调选项决定是否从隐藏的div复制到可见的组件中。

Answer 3

创建一个全局变量并在每次加载数据时中止它

 <button>Get External Content</button>

 var xhrPrevoius; // use this global var and assign it for your previously 
                  // loaded ajax when you making ajax request                    
 var xhrThis;      
 $("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt,        
 xhrThis){
    if(statusTxt == "success")
        // do you work here
      xhrPrevoius.abort(); // abort here the previously loaded ajax
    if(statusTxt == "error")
        alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});

如果在同一容器上启动了另一个load（），则jQuery stop load（）

3 个答案: