web-dev-qa-db-fra.com

JQuery, setTimeout ne fonctionne pas

Je suis toujours nouveau dans JQuery, sur le point d'obtenir mon exemple ajax au travail, je me suis retrouvé bloqué avec setTimeout. Je l'ai cassé à où il devrait ajouter "." à la div chaque seconde.

Le code correspondant est dans deux fichiers.

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>

et myCode.js 

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

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

le fichier myCode.js fonctionne bien et "update ()" est exécuté pour la première fois mais jamais plus.

javascriptjquerysettimeout
50
Bolt_Head

Vous avez quelques problèmes ici.

Tout d'abord, vous définissez votre code dans une fonction anonyme . Cette construction:

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

fait deux choses. Il définit une fonction anonyme et l'appelle. Il y a des raisons de faire cela, mais je ne suis pas sûr que ce soit ce que vous voulez réellement.

Vous passez un bloc de code à setTimeout() . Le problème est que update() n'est pas dans la portée lorsqu'il est exécuté comme ça. Cependant, si vous passez dans un pointeur de fonction, cela fonctionne:

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

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

parce que le pointeur de la fonction update est dans la portée de ce bloc.

Mais comme je l'ai dit, la fonction anonyme n'a pas besoin d'être réécrite comme ceci:

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

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

ou

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

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

et les deux fonctionnent. La seconde fonctionne parce que la update() dans le bloc de code est maintenant dans la portée.

Je préfère aussi le bloc bloc $(function() { ... } et plutôt que d'appeler setTimeout() dans update(), vous pouvez simplement utiliser setInterval() à la place:

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

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

J'espère que ça clarifie ça.

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

Vous pouvez utiliser clearInterval si vous souhaitez l’arrêter à un moment donné.

20
meder omuraliev

SetTimeout est utilisé pour que votre ensemble de code soit exécuté après une période spécifiée. Il est donc préférable d'utiliser setInterval car, pour vos besoins, il appellera votre fonction à chaque fois à un intervalle de temps spécifié.

8
Goysar

Ceci accomplit la même chose mais est beaucoup plus simple:

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

Vous pouvez chaîner un délai avant presque n'importe quelle méthode jQuery.

0
Victor Stoddard