So stoppen Sie ein div Laden einer HTML-Seite

Question

Die remove() auf ID Haupt wird durch Klicken auf eine andere externe Schaltfläche aufgerufen. Das Problem ist, wenn der Benutzer auf btn1 klickt und diese externe Schaltfläche schnell drückt, wird das Entfernen vor dem Ereignishandler für btn1 aufgerufen. Daraufhin wird das Popup geladen, nachdem das div entfernt wurde. Gibt es eine Möglichkeit, die Ladeanforderung zu stoppen, wenn auf den Ereignishandler zum Entfernen geklickt wird? Ich versuchte mit jqXHR.abort(), wenn remove-Methode aufgerufen wird, aber das funktioniert nicht, weil das Entfernen aufgerufen wird, bevor der Ajax sogar gesendet wird.

Es gibt viele Tasten wie btn1 die AJAX-Anfragen senden Dateien HTML und Nur wenige HTMlL laden für z a.html werden einige Skriptdateien wie a.js laden, die ausgeführt wird. Und wenn das Skript auf eine Variable verweist, die in remove() gelöscht wurde, wird ein TypeError angezeigt.

<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

Versuchen Sie, eine globale Variable

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

Als xhr ist async mit, so dass wir nicht garantieren können, wird die xhr vor #main.remove Verfahren beendet. Vielleicht könnten Sie eine Flagge verwenden, um dies zu kontrollieren.

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