Как использовать setInterval или setTimeout с циклом for? - PullRequest
Новая
       41

Как использовать setInterval или setTimeout с циклом for?

2 голосов
/ 29 октября 2010

Я пытаюсь установить интервал, когда запускается какой-то код, но мне нужно сделать это только на основе количества элементов. Вот быстрый пример:

всего 5 элементов

Запускать код каждые 20 секунд для каждого найденного элемента.

Может кто-нибудь дать мне базовый пример, как это сделать с помощью простого JavaScript? Все, что я пробовал, выполняет сразу весь код, а не по одному элементу за раз.

Ответы [ 4 ]

3 голосов
/ 29 октября 2010

давайте предположим, что вы говорите об элементах массива или коллекции DOM 

(function() {
   var arr = [...],
       len = arr.length;


   (function doProcess() {
       if (len--) {
           /* do something with arr[len] */
           setTimeout(doProcess, 20000);
       }
   })();    
})();

Edit: если по какой-либо причине вы не можете изменить массив, просто используйте следующую версию 

(function() {
   var arr = [...],
       len = arr.length;


   (function doProcess(i) {
       if (i) {
            console.log(len - i);
           /* do something with arr[len - i] */
           setTimeout(function() { doProcess(--i); }, 20000);
       }
   })(len);    
})();
0 голосов
/ 29 октября 2010

Вот код, который я сделал для анимации изображений с использованием jQuery: 

var enter = 500;
var show = 4000;
var exit = 300;
var direction1 = "right"; 
var direction2 = "left";
var logo = document.getElementById('Box1').getElementsByTagName('img');
var Num = $('#Box1 img').length;
var time_each = (enter+show+exit);
function startBox1(){
for(x=0;x<=Num-1;x++){
Box1(x);
}
}  
function Box1(x){
var buffer = time_each*x;
$(logo[x]).delay(buffer).show("slide", { direction: direction1 }, enter).delay(show).hide("slide", { direction: direction2 }, exit);
}
$(function(){
startBox1();
setInterval("startBox1()",(time_each)*Num);
});

Хитрость заключалась в том, чтобы установить буфер, который равнялся времени, затрачиваемому для каждой анимации, по индексу текущей анимации.Цикл FOR запускает каждый код немедленно;действие .delay() и переменная буфера заставляют его выглядеть так, как будто каждая анимация происходила одна за другой.Затем setInterval() вызывает цикл FOR после завершения каждой анимации.Он непрерывно перезапускает процесс.

0 голосов
/ 29 октября 2010

Вы должны определить функцию, а внутри функции ей нужно установить тайм-аут на себя. Как это: 

var els = [1, 2, 3, 4, 5];

((function process_els(el_index) {
  var el = els[el_index];

  // do stuff to el here
  console.log(el);
  // do stuff to el above

  if (el_index + 1 < els.length) {
    setTimeout(function() { process_els(el_index + 1); }, 20000);
  }
})(0);
0 голосов
/ 29 октября 2010

Посмотрите на этот пример: http://juixe.com/techknow/index.php/2005/10/28/put-javascript-to-sleep/

...