Question

点击另一个外部按钮即可调用ID 主上的remove()。问题是如果用户单击btn1并快速按下该外部按钮，则会在btn1的事件处理程序之前调用删除。因此，在删除div之后加载弹出窗口。有没有一种方法可以在单击删除事件处理程序时停止加载请求？我在调用remove方法时尝试使用jqXHR.abort()，但这不起作用，因为在发送ajax之前调用了remove。

有很多像btn1这样的按钮会发送ajax请求来加载HTML，而例如a.html的少量HTMlL文件会加载一些脚本文件，例如a.js，这些文件将被执行。如果脚本引用了remove()中删除的某个变量，则会出现TypeError。

<div id="base">
    <div id="main">
        <!-- some more HTML elements -->
        <button id="btn1"></button>
    </div>
    <div id ="popup">
    </div>
</div>

<script>  
    var xhr;      
    $("#btn1").on("click", function(){
        xhr = $.ajax(
        url: "a.html",
        success: function(){
             //do something
        }),
        type: "GET"
    });

    $("#main").on("remove", function(){
       // delete all resources,etc.
       xhr.abort();
    });
</script>

Answer 1

尝试使用全局变量

var removed = 0;
$('externabutton').click(function(){
  $("#main").remove();
   removed = 1;
});
 $("#btn1").on("click", function(){
        xhr = $.ajax(
        url: "a.html",
        success: function(data){
             if (removed == 0 ) {
              //append the data
             } else {removed ==0;}
        }),
        type: "GET"
    });

Answer 2

由于xhr是异步的，因此我们无法保证在xhr方法之前完成#main.remove。也许你可以使用一个标志来控制它。

var isRemoved = false, xhr;
$("#btn1").on("click", function(){
    if(isRemoved) return;
    xhr = $.ajax({
      url: "a.html",
      success: function(){
           //do something
        if(isRemoved) return;
      },
      type: "GET"
   });
 });

$("#main").on("remove", function(){
   isRemoved = true;
   xhr && xhr.abort();
});

如何停止加载HTML页面的div

2 个答案: