Как использовать SetInterval или Settimeout с A для цикла?
-
27-09-2019 - |
Вопрос
Я пытаюсь установить интервал, когда какой-то код работает, но нужно только сделать это на основе количества элементов. Вот быстрый пример:
5 Всего элементов
Запустите код один раз в 20 секунд для каждого найденного элемента.
Может кто-нибудь, пожалуйста, дайте мне основной пример, как это сделать, используя простой JavaScript? Все, что я пытался, просто выполняет весь код сразу вместо одного элемента за раз.
Решение
Предположим, вы говорите о элементах массива или коллекции DOM
(function() {
var arr = [...],
len = arr.length;
(function doProcess() {
if (len--) {
/* do something with arr[len] */
setTimeout(doProcess, 20000);
}
})();
})();
Редактировать: Если вы не можете поменять массив по любой причине, просто используйте следующую версию
(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);
})();
Другие советы
Посмотрите на этот пример: http://juixe.com/techknow/index.php/2005/10/28/put-javascript-to-sleep/
Вот какой-то код, который я сделал для анимации изображений с помощью 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
петля после каждой анимации завершена. Он непрерывно перезапускает процесс.
Вы должны определить функцию, а внутри функции необходимо установить время ожидания. Как это:
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);