Javascript-Funktionen hält die Ausführung auch nach dem DIV Aktualisierung

Question

Ich habe bestimmte Inhalte, die auf dieser Id Ajax zum Beispiel unter Verwendung aktualisiert wird, nehmen wir an, ich eine komplette Hauptseite haben und innerhalb des body Ich habe diesen Code:

<div id="content"> 
<button onclick="update1()"></button> 
<button onclick="update2()"></button> 
</div> 

    <script> 
     function update1(){ 
        $.ajax({ 
        url:"Page1/index.html", 
        type:'GET', 
        success: function(data){ 
         $('#content').html((data)); 
        } 
       }); 
     } 
      function update2(){ 
        $.ajax({ 
        url:"Page2/index.html", 
        type:'GET', 
        success: function(data){ 
         $('#content').html((data)); 
        } 
       }); 
     } 
    </script> 
<script src="js/script.js"></script> 

Und die index.html von Seite1 enthält einen Code wie folgt aus:

<button onclick="update1()"></button> 
<button onclick="update2()"></button> 
<div id="page1"> .....</div> 

Und die index.html von Page2 enthält einen Code wie folgt aus:

<button onclick="update1()"></button> 
<button onclick="update2()"></button> 
<div id="page2"> .....</div> 

Und der script.js enthält einen Code wie folgt aus:

$(document).ready(
      function() { 
       setInterval(function() { 

         $.ajax({ 
          url: "someapi", 
          type: "POST", 
          dataType: "json", 
          success: function (result) { 
           console.log(result) 
          } 
         }); 

       }, 2000); 
      }); 

Was ich will ist tun, wenn die Taste gedrückt wird Ajax aufrufen, die die index.html bekommt von Seite1 und legt es in dem id Inhalt, ein script.js dieses Skript ausgeführt werden nur ausgeführt, wenn die ID page1 existiert, habe ich diesen Trick aus this answer, gefunden ein, wenn mit jQuery zum Beispiel if($('#page1').length){my sj code} der JavaScript-Code läuft nur verwenden, wenn die ID existiert, aber leider, wenn ich auf die Schaltfläche klicken, die Page2 zu erhalten, die ein anderen ID page2 hat dass Code ausgeführt hält, ist es eine Möglichkeit, Stoppen Sie diesen Js-Code, wenn dieser div aktualisiert wird ???

Answer 1

Die Funktion Anhalten nicht, weil das Intervall, wenn Sie klar, dass es nicht Brennen stoppt, mit clearInterval() Funktion.

nur alle wie dies Ihren JS-Code in einer Datei setzen:

$(document).ready(function() { 
var the_interval = setInterval(function() { 

    $.ajax({ 
     url: "someapi", 
     type: "POST", 
     dataType: "json", 
     success: function (result) { 
      console.log(result) 
     } 
    }); 

}, 2000); 

function stopTheInterval(){ 
    clearInterval(the_interval); 
} 

function update1(){ 
    $.ajax({ 
     url:"Page1/index.html", 
     type:'GET', 
     success: function(data){ 
      $('#content').html((data)); 
     } 
    }); 
} 

function update2(){ 
    $.ajax({ 
     url:"Page2/index.html", 
     type:'GET', 
     success: function(data){ 
      $('#content').html((data)); 
      stopTheInterval(); // we stop the first interval 
     } 
    }); 
}}); 

, was ich hier tat, um die Intervallnummer in einer Variablen gespeichert, und eine neue Funktion, die sie zu löschen. Als nächstes habe ich nur meine neue Funktion in Ihre update2() -Funktion eingefügt, sobald ich die Daten zurückbekomme, lösche ich das Intervall und stoppe die Wiederholungsfunktion.

Answer 2

Versuchen Sie es mit update1().stop() beim Starten von update2 Funktion

Answer 3

script.js
setInterval nicht verwenden.

function some_function(){ 
    $.ajax({ 
     url: "someapi", 
     type: "POST", 
     dataType: "json", 
     success: function (result) { 
      console.log(result) 
    } 
    }); 
} 

Und rufen Sie über Funktion in update1.because Sie wollen nur, wenn page1 aktualisiert

<script> 
    function update1(){ 
    $.ajax({ 
     url:"Page1/index.html", 
     type:'GET', 
     success: function(data){ 
     $('#content').html((data)); 
     some_function()  // call function here 
     } 
    }); 
    } 

function update2(){ 
    $.ajax({ 
    url:"Page2/index.html", 
    type:'GET', 
    success: function(data){ 
     $('#content').html((data)); 
    } 
    }); 
} 
</script>