JQuery, setTimeout не работает

Я все еще новичок в JQuery, на пути к тому, чтобы заставить мой пример ajax работать, я остановился на setTimeout. Я сломал его туда, где он должен добавить "." к div каждую секунду.

Соответствующий код состоит из двух файлов.

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>

и myCode.js

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

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

Файл myCode.js работает нормально, а "update()" запускается в первый раз, но никогда больше.

Ответы

Ответ 1

У вас здесь пара проблем.

Во-первых, вы определяете свой код в анонимной функции. Эта конструкция:

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

выполняет две вещи. Он определяет анонимную функцию и вызывает ее. Есть причины для этого, но я не уверен, чего вы на самом деле хотите.

Вы передаете блок кода setTimeout(). Проблема заключается в том, что update() не выполняется в пределах области действия при выполнении как это. Однако, если вы перейдете в указатель на функцию, чтобы это работало:

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

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

потому что указатель функции update находится в пределах области действия этого блока.

Но, как я уже сказал, нет никакой анонимной функции, поэтому вы можете ее переписать следующим образом:

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

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

или

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

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

и обе эти работы. Второй работает, потому что update() внутри кодового блока теперь находится в пределах области действия.

Я также предпочитаю сокращенную форму $(function() { ... } и вместо вызова setTimeout() внутри update() вы можете просто использовать setInterval() вместо:

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

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

Надеюсь, что это очистит.

Ответ 2

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

Вы можете использовать clearInterval, если хотите остановить его в одной точке.

Ответ 3

SetTimeout используется для выполнения вашего набора кода после определенного периода времени, поэтому для ваших требований лучше использовать setInterval, поскольку он будет вызывать вашу функцию каждый раз с заданным интервалом времени.

Ответ 4

Это выполняет то же самое, но намного проще:

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

Вы можете связать задержку перед почти любым методом jQuery.