JQuery, SetTimeout funktioniert nicht

StackOverflow https://stackoverflow.com/questions/1495903

  •  18-09-2019
  •  | 
  •  

Frage

Ich bin immer noch neu in JQuery, auf dem Weg, mein AJAX -Beispiel zum Arbeiten zu bringen, wurde ich mit SetTimeout ins Stocken geraten. Ich habe es dorthin abgebrochen, wo es hinzufügen sollte "." Zum Div jede Sekunde.

Der entsprechende Code befindet sich in zwei Dateien.

index.html

<html><head>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='myCode.js'></script>
</head>
<body>
<div id='board'>Text</div>
</body>
</html>

und mycode.js

(function(){
   $(document).ready(function() {update();});

   function update() { 
      $("#board").append(".");
      setTimeout('update()', 1000);     }
 })();

Die Datei mycode.js funktioniert in Ordnung und "update ()" wird das erste Mal durchläuft, aber nie wieder.

War es hilfreich?

Lösung

Sie haben hier ein paar Probleme.

Erstens definieren Sie Ihren Code in einem Anonyme Funktion. Dieses Konstrukt:

(function() {
  ...
)();

macht zwei Dinge. Es definiert eine anonyme Funktion und nennt sie. Es gibt Gründe dafür, dies zu tun, aber ich bin mir nicht sicher, ob es das ist, was Sie tatsächlich wollen.

Sie übergeben einen Codeblock zu setTimeout(). Das Problem ist, dass update() ist nicht im Bereich, wenn sie so ausgeführt werden. Wenn Sie stattdessen einen Funktionszeiger eingeben, funktioniert dies jedoch:

(function() {
  $(document).ready(function() {update();});

  function update() { 
    $("#board").append(".");
    setTimeout(update, 1000);     }
  }
)();

Weil der Funktionszeiger update ist innerhalb dieses Blocks.

Aber wie gesagt, es besteht keine Notwendigkeit für die anonyme Funktion, so dass Sie sie so umschreiben können:

$(document).ready(function() {update();});

function update() { 
  $("#board").append(".");
  setTimeout(update, 1000);     }
}

oder

$(document).ready(function() {update();});

function update() { 
  $("#board").append(".");
  setTimeout('update()', 1000);     }
}

und beide arbeiten. Die zweite funktioniert, weil die update() Innerhalb des Codeblocks befindet sich jetzt im Bereich.

Ich bevorzuge auch das $(function() { ... } verkürzte Blockform und anstatt anzurufen setTimeout() innerhalb update() Sie können einfach verwenden setInterval() stattdessen:

$(function() {
  setInterval(update, 1000);
});

function update() {
  $("#board").append(".");
}

Hoffe das klärt das auf.

Andere Tipps

setInterval(function() {
    $('#board').append('.');
}, 1000);

Sie können ClearInterval verwenden, wenn Sie es an einem Punkt stoppen möchten.

SetTimeOut wird verwendet, um Ihren Code -Satz nach einem bestimmten Zeitraum auszuführen, sodass Ihre Anforderungen bessere SetInterVal verwenden können, da Ihre Funktion jedes Mal in einem bestimmten Zeitintervall aufgerufen wird.

Dies erreicht dasselbe, ist aber viel einfacher:

$(document).ready(function() {  
   $("#board").delay(1000).append(".");
});

Sie können eine Verzögerung vor fast jeder JQuery -Methode ketten.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top