Jak zatrzymać element ładujący stronę HTML

Question

Identyfikator na główny jest wywoływany po kliknięciu innego przycisku zewnętrznego. Problem polega na tym, że jeśli użytkownik kliknie btn1 i szybko naciśnie ten zewnętrzny przycisk, wywoływane jest wywołanie przed procedurą obsługi zdarzeń dla btn1. W wyniku tego popup jest ładowany po usunięciu elementu div. Czy istnieje sposób zatrzymania żądania obciążenia po kliknięciu programu obsługi zdarzeń do usunięcia? Próbowałem z jqXHR.abort() po wywołaniu metody remove, ale to nie działa, ponieważ usuwanie jest wywoływane przed wysłaniem ajax'a.

Istnieje wiele przycisków, takich jak btn1, które wyśle ​​zapytanie ajax do załadowania HTML i Kilka plików HTMlL dla np. a.html załaduje niektóre pliki skryptowe, takie jak a.js, które zostaną wykonane. A jeśli skrypt odnosi się do pewnej zmiennej, która została usunięta w remove(), wystąpi 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

Spróbuj użyć zmiennej globalnej

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

Jako xhr jest asynchroniczny, więc nie możemy zagwarantować xhr jest zakończona przed #main.remove metody. Może mógłbyś użyć flagi, żeby to kontrolować.

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