JQuery, setTimeout no funciona

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

  •  18-09-2019
  •  | 
  •  

Pregunta

Todavía soy nuevo en jQuery, en el camino para que mi ejemplo de Ajax funcione, me estancé con SetTimeOut. Lo he roto hasta donde debería agregar ". al div cada segundo.

El código relevante está en dos archivos.

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>

y mycode.js

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

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

El archivo mycode.js funciona bien y "update ()" se ejecuta la primera vez, pero nunca más.

¿Fue útil?

Solución

Tienes un par de problemas aquí.

En primer lugar, estás definiendo tu código dentro de un función anónima. Esta construcción:

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

hace dos cosas. Define una función anónima y la llama. Hay razones de alcance para hacer esto, pero no estoy seguro de que sea lo que realmente quieres.

Estás pasando en un bloque de código a setTimeout(). El problema es ese update() no está dentro del alcance cuando se ejecuta así. Sin embargo, si pasa en un puntero de función, en su lugar, esto funciona:

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

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

Porque el puntero de la función update está dentro del alcance de ese bloque.

Pero como dije, no hay necesidad de la función anónima para que pueda reescribirla así:

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

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

o

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

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

y ambos trabajan. El segundo funciona porque el update() Dentro del bloque de código está dentro del alcance ahora.

También prefiero el $(function() { ... } forma de bloque acortado y en lugar de llamar setTimeout() dentro de update() puedes simplemente usar setInterval() en cambio:

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

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

Espero que eso aclare eso.

Otros consejos

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

Puede usar ClearInterval si desea detenerlo en un punto.

SetTimeOut se usa para hacer que su conjunto de código se ejecute después de un período de tiempo específico, por lo que para sus requisitos es mejor usar SetInterval porque eso llamará a su función cada vez a un intervalo de tiempo específico.

Esto logra lo mismo pero es mucho más simple:

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

Puede encadenar un retraso antes de casi cualquier método jQuery.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top