3

Eu queria que enquanto p fosse maior que 0, ele fosse tirando 1 a cada 100 milissegundos, mas ele tira tudo e não a cada 100 milissegundos:

let p = 100

while(p >= 0){
    p = p - 1
    console.log(p)
    setTimeout((e) => {},100)    
}
1
  • 5
    Ninguém comentou, mas o seu erro de partida é tratar o setTimeout como se fosse um sleep – ou seja, como se pausasse a execução do programa por determinado tempo. Fique claro que não funciona assim, em JavaScript tem muita coisa assíncrona. Entendendo bem isso, acredito que as respostas abaixo ficarão mais claras.
    – bfavaretto
    23/11/2021 às 16:42

2 Respostas 2

8

O primeiro parâmetro de setTimeout é a função que será executada depois de determinado intervalo de tempo. E no seu caso você passou (e) => {}, que é uma função que não faz nada. Ou seja, no seu loop você imprime os números (sem esperar por um intervalo, já que o console.log está fora do setTimeout) e diz que a função que não faz nada será executada depois de 100 milissegundos.

Enfim, para que algo seja executado somente depois de determinado tempo, você tem que colocar esse algo dentro da função que é passada para setTimeout.

Tem outro detalhe: o primeiro número também deve esperar os 100 milissegundos ou não?

Se o primeiro número não deve esperar os 100 milissegundos, você pode fazer assim:

function diminui(valor, tempo) {
    if (valor >= 0) { // se é maior que zero, imprime
        console.log(valor);
        // agenda a próxima execução
        setTimeout(() => diminui(valor - 1, tempo), tempo);
    }
}

diminui(100, 100);

Ou seja, a primeira chamada será com o valor inicial (100), que será impresso sem esperar os 100 milissegundos. Depois, eu chamo setTimeout para que ele execute a mesma função em 100 milissegundos, mas passando o valor atual menos 1, e o mesmo intervalo de tempo.

Pode parecer redundante passar o tempo na função diminui, mas com isso você poderia mudar o tempo de espera da próxima chamada, por exemplo (no caso estou passando sempre o mesmo valor, já que a ideia é que não mude, e até poderia ser uma variável global, mas enfim).

Quando o valor for menor que zero, ele não imprimirá nada e também não chamará o setTimeout, e o código se encerra.


Mas se o primeiro número deve esperar os 100 milissegundos, então tem que usar setTimeout na primeira chamada também:

function diminui(valor, tempo) {
    if (valor >= 0) { // se é maior que zero, imprime
        console.log(valor);
        // agenda a próxima execução
        setTimeout(() => diminui(valor - 1, tempo), tempo);
    }
}

// o primeiro número também espera os 100 milissegundos
setTimeout(() => diminui(100, 100), 100);

Como o intervalo de 100 milissegundos é muito rápido, talvez não dê para perceber a diferença, mas teste com 1 segundo (1000 milissegundos) para ver a diferença.


Ainda daria para incrementar mais, parametrizando também o valor final:

function diminui(valor, valorFinal, tempo) {
    if (valor >= valorFinal) {
        console.log(valor);
        // agenda a próxima execução
        setTimeout(() => diminui(valor - 1, valorFinal, tempo), tempo);
    }
}

diminui(100, 0, 100);


Claro que você também pode usar setInterval como indicou a outra resposta (lembrando que na solução dada lá o primeiro número também espera para ser impresso).

Mas não deixe de ler aqui para mais detalhes sobre as diferenças entre essas duas funções.

3
  • O problema neste código é que o método setTimeout() executa a função uma única vez, após o número especificado de milisegundos.
  • Neste seu caso que exige repetição, você pode utilizar o método setInterval() e retirar o laço de repetição while.
  • Além disso, é preciso adicionar o clearInterval() para finalizar a contagem.

Exemplo:

let p = 100

let timer = setInterval(() => {
    if (p < 0) {
        clearInterval(timer)
    } else {
    console.log(p)
    p = p - 1
    }
}, 100)

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 .