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)
}
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)
}
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.
while
.let p = 100
let timer = setInterval(() => {
if (p < 0) {
clearInterval(timer)
} else {
console.log(p)
p = p - 1
}
}, 100)