Como usar o setInterval ou o setTimeout com um loop for?
-
27-09-2019 - |
Pergunta
Estou tentando definir um intervalo quando algum código é executado, mas só precisa fazê -lo com base no número de elementos que existem. Aqui está um exemplo rápido:
5 elementos totais
Execute o código uma vez a cada 20 segundos para cada elemento encontrado.
Alguém pode me dar um exemplo básico de como fazer isso usando JavaScript simples? Tudo o que tentei executar todo o código de uma só vez, em vez de fazer um elemento de cada vez.
Solução
Vamos supor que você está falando sobre elementos de uma matriz ou uma coleção DOM
(function() {
var arr = [...],
len = arr.length;
(function doProcess() {
if (len--) {
/* do something with arr[len] */
setTimeout(doProcess, 20000);
}
})();
})();
Editar: se você não puder reverter a matriz por qualquer motivo, basta usar a próxima versão
(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);
})();
Outras dicas
Veja este exemplo: http://juixe.com/techknow/index.php/2005/10/28/put-javascript-to-sleep/
Aqui está algum código que fiz para animar imagens usando o 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);
});
O truque era definir um buffer que fosse igual ao tempo necessário para cada animação pelo índice da animação atual. o FOR
O loop executa cada código imediatamente; a .delay()
A ação e a variável buffer fazem parecer que cada animação estava acontecendo uma após a outra. Então setInterval()
lembra o FOR
Loop após a conclusão de cada animação. Ele reinicia o processo continuamente.
Você precisa definir uma função e, dentro da função, precisa definir um tempo limite por si mesmo. Assim:
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);