web-dev-qa-db-ger.com

JQuery, setTimeout funktioniert nicht

Ich bin immer noch neu bei JQuery. Auf dem Weg, mein Ajax-Beispiel zum Laufen zu bringen, wurde ich mit setTimeout blockiert. Ich habe es aufgeschlüsselt, wo es "." jede Sekunde zum Div.

Der entsprechende Code besteht aus 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 einwandfrei und "update ()" wird beim ersten Mal ausgeführt, aber nie wieder.

50
Bolt_Head

Sie haben hier ein paar Probleme.

Zunächst definieren Sie Ihren Code innerhalb einer anonymen Funktion . Dieses Konstrukt:

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

macht zwei Dinge. Es definiert eine anonyme Funktion und ruft sie auf. Es gibt verschiedene Gründe, dies zu tun, aber ich bin mir nicht sicher, ob Sie das wirklich wollen.

Sie übergeben einen Codeblock an setTimeout() . Das Problem ist, dass update() nicht in den Geltungsbereich fällt, wenn es so ausgeführt wird. Wenn Sie jedoch stattdessen einen Funktionszeiger übergeben, funktioniert dies:

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

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

weil der Funktionszeiger update im Gültigkeitsbereich dieses Blocks liegt.

Aber wie gesagt, die anonyme Funktion ist nicht erforderlich, sodass Sie sie wie folgt 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 Funktion funktioniert, da sich die update() innerhalb des Codeblocks jetzt im Gültigkeitsbereich befindet.

Ich bevorzuge die $(function() { ... } verkürzte Blockform und anstatt setTimeout() innerhalb von update() aufzurufen, können Sie stattdessen einfach setInterval() verwenden:

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

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

Hoffe das klärt das auf.

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

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

20
meder omuraliev

SetTimeout wird verwendet, um die Ausführung des Codesatzes nach einer bestimmten Zeitdauer zu veranlassen, so dass es für Ihre Anforderungen besser ist, setInterval zu verwenden, da dies Ihre Funktion jedes Mal in einem bestimmten Zeitintervall aufruft.

8
Goysar

Dies bewirkt dasselbe, ist aber viel einfacher:

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

Sie können eine Verzögerung vor fast jeder jQuery-Methode verketten.

0
Victor Stoddard