0

Eu adiciono uma linha via .innerHTML em uma usando javaScript Porém um dos caracteres dessa linha muda à cada inclusão de acordo com a letra dentro a variável P

HTML

<div>
  <div class="linha" id="linha2">
  </div><button class="casa" id="btnadd" onclick="addLetra()"></button>
</div>

Eu fiz um temporizador síncrono para essas divs serem colocadas à cada 1 Segundo

JavaScript

function addLetra(){
    let p="palavra"

    function esperaFinal(ms){
        let ini = new Date().getTime()
         let fim=0;
         while((fim-ini)<ms){
             fim = new Date().getTime()
        }
    }


    for(i=0;i<p.length;i++){
      esperaFinal(500)
      let pff = '<div class="wrong" id="linhaFinal"><span id="palavraFinal">'+p[i]+'</span><div>'
      resultadoFinal(pff)
    }

    function resultadoFinal(pff) {
      document.getElementById("linha2").innerHTML += pff
    }
 }

A minha intenção era cada laço do for levar 500ms

Porém o que eu tenho é o código esperar os 500ms e depois colocar todas as divs (cada uma com uma letra de p) ao mesmo tempo

2 Respostas 2

1

Por que tem de ser síncrono? É muito mais simples fazer assíncrono, respeitando a forma como a linguagem funciona. A atualização do que está na tela depende de ser assíncrono, o browser só redesenha a tela depois que terminar o lote pendente de operações síncronas que tem pra executar. Mais detalhes aqui. Versão assíncrona:

// Não se esqueça de declarar i!
for (let i=0;i<p.length;i++) {
    setTimeout( function() {
        resultadoFinal('<div class="wrong" id="linhaFinal"><span id="palavraFinal">'+p[i]+'</span><div>')
    }, i * 500 )
}

Teste

0
-3

How to Make Delay in Javascript

Note: I use Prommise and SetTimeOut


1: Create a async function call => delay
2: create a method or function async
//function make delay
async function delay(timeDelay){
    return new Promise(resolve => setTimeout(resolve, timeDelay));
}

//function execute for and use delay!
const exampleWithFor = async ()=>{
    console.log('running example for');
    for (let id = 0; id < 5; id++) {

        console.log('vez: ',id+1)
        var tmp = new Date();
        console.log('timer: ',tmp.toLocaleString());
        console.log("================= \n");
        await delay(2000);
    }
}
//excute this function to use delay
exampleWithFor()

ìnto => for() = you use to add div in your document

The up Example Resolve Your Problems

1
  • 1
    Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 18/08/2022 às 19:34

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 .