Skip to main content
removeu 1 caractere do conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Você pode usar uma função auto-executávelexecutada 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>

Você pode usar uma função auto-executável 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>

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>

removeu 762 caracteres do conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Sugiro vocêVocê pode usar um dos dois métodos: setInterval ou uma função auto-executável com setTimeout:

Usando dentro do laço, que irá simular um um setIntervaldelay no laço for:

var li = document.getElementsByTagName("li"),
lengthLI = li.length,length;
conta = 0,
tempo = setInterval(functionfor(){
   
   var conta++;
x = 0; x if(conta< >lengthLI; lengthLI-1x++){
     
   clearInterval(tempofunction(x);{
       console.logsetTimeout("fim"function();{
    }else{
       console.log(li[conta]li[x].innerText);
    }
   
 }, 1000x*1000); // intervalo1000 de= 1 segundo
console.log(li[conta].innerText); // para executar logo o primeiro antes do temporizador
<ul>
   <li>li 1</li>
   <li>li 2</li>
   <li>li 3</li>
</ul>

Usando Função:

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

function f() {
    console.log(li[conta].innerText);
    conta++;
    if( conta < lengthLI ){
        setTimeout( f, 1000 );
    }else{
        console.log("fim"x));
    }
}
f();
<ul>
   <li>li 1</li>
   <li>li 2</li>
   <li>li 3</li>
</ul>

Sugiro você usar um dos dois métodos: setInterval ou uma função com setTimeout:

Usando setInterval:

var li = document.getElementsByTagName("li"),
lengthLI = li.length,
conta = 0,
tempo = setInterval(function(){
   
    conta++;
    if(conta > lengthLI-1){
       clearInterval(tempo);
       console.log("fim");
    }else{
       console.log(li[conta].innerText);
    }
   
 }, 1000); // intervalo de 1 segundo
console.log(li[conta].innerText); // para executar logo o primeiro antes do temporizador
<ul>
   <li>li 1</li>
   <li>li 2</li>
   <li>li 3</li>
</ul>

Usando Função:

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

function f() {
    console.log(li[conta].innerText);
    conta++;
    if( conta < lengthLI ){
        setTimeout( f, 1000 );
    }else{
        console.log("fim");
    }
}
f();
<ul>
   <li>li 1</li>
   <li>li 2</li>
   <li>li 3</li>
</ul>

Você pode usar uma função auto-executável 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>

adicionou 568 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Eu sugeririaSugiro você usar oum dos dois métodos: setInterval para fazer o laço, acho bem mais prático, e você pode setar o tempo que quiser.ou uma função com setTimeout:

Veja um exemploUsando setInterval:

var li = document.getElementsByTagName("li"),
lengthLI = li.length,
conta = 0,
tempo = setInterval(function(){
   
    conta++;
    if(conta > lengthLI-1){
       clearInterval(tempo);
       console.log("fim");
    }else{
       console.log(li[conta].innerText);
    }
   
}, 1000); // intervalo de 1 segundo
console.log(li[conta].innerText); // para executar logo o primeiro antes do temporizador
<ul>
   <li>li 1</li>
   <li>li 2</li>
   <li>li 3</li>
</ul>

Usando Função:

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

function f() {
    console.log(li[conta].innerText);
    conta++;
    if( conta < lengthLI ){
        setTimeout( f, 1000 );
    }else{
        console.log("fim");
    }
}
f();
<ul>
   <li>li 1</li>
   <li>li 2</li>
   <li>li 3</li>
</ul>

Eu sugeriria usar o setInterval para fazer o laço, acho bem mais prático, e você pode setar o tempo que quiser.

Veja um exemplo:

var li = document.getElementsByTagName("li"),
lengthLI = li.length,
conta = 0,
tempo = setInterval(function(){
   
    conta++;
    if(conta > lengthLI-1){
       clearInterval(tempo);
       console.log("fim");
    }else{
       console.log(li[conta].innerText);
    }
   
}, 1000); // intervalo de 1 segundo
console.log(li[conta].innerText); // para executar logo o primeiro antes do temporizador
<ul>
   <li>li 1</li>
   <li>li 2</li>
   <li>li 3</li>
</ul>

Sugiro você usar um dos dois métodos: setInterval ou uma função com setTimeout:

Usando setInterval:

var li = document.getElementsByTagName("li"),
lengthLI = li.length,
conta = 0,
tempo = setInterval(function(){
   
    conta++;
    if(conta > lengthLI-1){
       clearInterval(tempo);
       console.log("fim");
    }else{
       console.log(li[conta].innerText);
    }
   
}, 1000); // intervalo de 1 segundo
console.log(li[conta].innerText); // para executar logo o primeiro antes do temporizador
<ul>
   <li>li 1</li>
   <li>li 2</li>
   <li>li 3</li>
</ul>

Usando Função:

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

function f() {
    console.log(li[conta].innerText);
    conta++;
    if( conta < lengthLI ){
        setTimeout( f, 1000 );
    }else{
        console.log("fim");
    }
}
f();
<ul>
   <li>li 1</li>
   <li>li 2</li>
   <li>li 3</li>
</ul>

adicionou 26 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128
Carregando
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128
Carregando