Cách dừng tải div trang HTML

Question

Số remove() trên id chính được gọi bằng cách nhấp vào nút bên ngoài khác. Vấn đề là nếu người dùng nhấp vào btn1 và nhanh chóng nhấn nút bên ngoài đó, lệnh xóa sẽ được gọi trước trình xử lý sự kiện cho btn1. Kết quả là cửa sổ bật lên được tải sau khi div đã bị xóa. Có cách nào mà yêu cầu tải có thể được dừng lại khi xử lý sự kiện để xóa được nhấp không? Tôi đã thử với jqXHR.abort() khi loại bỏ phương pháp được gọi, nhưng điều đó không làm việc vì loại bỏ được gọi là trước khi ajax thậm chí được gửi đi.

Có nhiều nút như btn1 sẽ gửi yêu cầu ajax để tải tệp HTML và ít HTMlL cho ví dụ: a.html sẽ tải một số tệp tập lệnh như a.js, sẽ được thực thi. Và nếu kịch bản đề cập đến một số biến đã bị xóa trong remove(), sẽ có một 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

Hãy thử sử dụng một biến toàn cầu

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

Khi xhr là async, vì vậy chúng tôi không thể đảm bảo xhr được hoàn thành trước #main.remove phương pháp. Có lẽ bạn có thể sử dụng một lá cờ để kiểm soát điều này.

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(); 
});