-1

Bom dia, ao colocar o metodos dentro de um laço de repitção for, o tempo de espera acontece somente uma única vez, sendo que nas demais repetições não ocorre o tempo de espera do setTimeout.

HTML

<div class="container_posicionamento">
      <table id="tabela">
      </table>
</div>

JavaScript Gerando a Tabela

const numLinha = 51;
    const numColuna = 98;
    const tabela = document.getElementById("tabela");

    for (let i = 0; i < numLinha; i++) {
        // cria cada tr no primeiro loop
        let tabLinha = document.createElement("tr");
        tabLinha.setAttribute("id","lin_"+i); //Cada uma das TR vai receber um id
        tabela.appendChild(tabLinha);
        for (let j = 0; j < numColuna; j++) {
            // cria cada td no segundo loop
            let tabElem = document.createElement("td");    
            tabElem.setAttribute("id","lin_"+i+"_"+j); //Cada uma das TD vai receber um id
            tabLinha.appendChild(tabElem);
            tabElem.innerHTML += `<div class="box_div"></div>`;
        }
    }

Colorindo a Tabela

for(let j = 0; j <= 97; j++){
            setTimeout(function(){
                for(let i = 0; i <= 50; i++){
                    const temp = document.querySelector("#lin_"+i+"_"+j); 
                    temp.children[0].style.backgroundColor = "red";
                }
            },2000); //tempo em milisegundos 
        }

Não estou conseguindo preencher as colunas a cada 2 segundos, gostaria que a cada 2 segundos uma coluna fosse preenchida por vez. Obrigado.

0

1 Resposta 1

0

setTimeout() não bloqueia a execução, logo retorna instantaneamente. Na prática ele disparou as 97 iterações do seu código ao mesmo tempo, por isso parece que o setTimeout não funciona.

Tente fazer uma função loop e faça as verificações dentro da função:

var i = 1;                  //  Contador

    function myLoop() {         //  loop
      setTimeout(function() {   //  2s
        console.log('linha'+i);   //  Coloque seu código aqui
        i++;                    //  incrementa o contador
        if (i < 97) {           //  condicional do loop
          myLoop();             //  chamando a si mesmo (medo)
        }                       // 
      }, 2000)
    }
    
    myLoop();                   //  chama função

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