0

Eu estou querendo setar um intervalo na execução de cada laço do meu for

var li = document.getElementByTagName("li");
lengthLI = li.length;
for(var x = 0; x < lengthLI; x++){
    console.log(li[x].innerText);
    // setar intrvalo
}

como eu poderia estar conseguindo fazer isso?

4 Respostas 4

4

Você pode usar uma função auto-executada com setTimeout dentro do laço, que irá simular um um delay no laço for:

var li = document.getElementsByTagName("li"),
lengthLI = li.length;

for(var x = 0; x < lengthLI; x++){

   (function(x){
      setTimeout(function(){
         console.log(li[x].innerText);
      }, x*1000); // 1000 = 1 segundo
   }(x));

}
<ul>
   <li>li 1</li>
   <li>li 2</li>
   <li>li 3</li>
</ul>

1
  • 1
    Sou uma lesma pra digitar :).
    – NoobSaibot
    Commented 4/03/2018 às 4:17
3

Você pode criar um método e utilizar setInterval, veja:

let li = document.querySelectorAll('li');
let x = 0;
let intervalo = null;

const loop = () => {
  if (x < li.length) {
    console.log(li[x].innerText);
  } else {
    clearInterval(intervalo);
    console.log('Fim !');
    x = 0;
  }
  x++;
};

intervalo = setInterval(loop, 1000);
<li>Texto A</li>
<li>Texto B</li>
<li>Texto C</li>
<li>Texto D</li>
<li>Texto E</li>
<li>Texto F</li>
<li>Texto G</li>
<li>Texto H</li>
<li>Texto I</li>

A cada 1 segundo será executado o método loop que irá verificar se o valor da variável x é menor que a quantidade de elementos li no documento, caso seja, retorna no console o texto desse elemento.

2

Além dos métodos já mencionados, você também pode usar o operador await. Esse operador é utilizado para "esperar" o resultado de uma promise.

Para utiliza-lo, basta criar uma função assíncrona, por exemplo:

const elements = document.querySelectorAll("li");

(async () => {for (let element of elements) {
  console.log( element )
  await new Promise( resolve => setTimeout(resolve, 1000) )
}})();
<li>Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>

1

Aqui mostro uma solução parecida com a do @dvd mas utilizando let no for que acaba por capturar o contexto correto não necessitando de uma função extra à volta do setTimeout. Isto está relacionado com closures e com o escopo do let ficar apenas no for.

Implementação:

const lis = document.getElementsByTagName("li");
for(let x = 0; x < lis.length; x++){
  setTimeout(() => console.log(lis[x].innerText), 1000 * x);
}
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .