нужна помощь в установке таймера обратного отсчета с помощью javascript - PullRequest
Новая
       94

нужна помощь в установке таймера обратного отсчета с помощью javascript

0 голосов
/ 08 мая 2020

Я пытаюсь создать часы обратного отсчета и наткнулся на небольшую загвоздку. Он отображает окончательное число, окончательный результат для l oop, который мне не нужен. Моя цель состоит в том, чтобы l oop запускал мой .setTimeout каждый раз, когда он зацикливается. Буду признателен за любую помощь. 

const countdownClock = (ranNum) => {
    const startingNum = ranNum * 50;
    for(let i = startingNum; i > 0; i--) {
        setTimeout(() => countdownSpan.textContent = [i], 1000);
    }
}

Ответы [ 2 ]

1 голос
/ 08 мая 2020

Это потому, что setTimeout ожидает выполнения 1s, и до тех пор l oop завершается даже до того, как сработает ваш первый setTimeout, и когда срабатывает ваш первый тайм-аут, значение i равно обновлен и теперь это последний номер l oop. Вы можете справиться с этим с помощью promises и async/await. 

const countdownClock = async (ranNum) => {
    const startingNum = ranNum * 50;
    for(let i = startingNum; i > 0; i--) {
        await new Promise(resolve => {
         setTimeout(() => {
            countdownSpan.textContent = [i];
            resolve()
         }, 1000)
       });
    }
}

Надеюсь, это поможет!

0 голосов
/ 08 мая 2020

Функции таймера не сработают, пока текущая функция не будет завершена. Вот почему ваш for l oop завершается до запуска функции таймера. Чтобы увидеть, как отсчитывается таймер, вам вообще не следует использовать al oop, потому что таймер создаст функцию цикла. Вам нужен только рекурсивный setInterval() или setTimeout(). 

const element = document.getElementById("countdown");

let startingNum = parseInt(Math.random() * 50, 10);
let timer = null;

function counter(){
  // Clear any running timer to prevent multiple
  // timers from stacking up in the event queue
  clearTimeout(timer); 
  
  startingNum--; // Decrease the counter
  
  // If the count is greater than 0
  if(startingNum >-1){
    element.textContent = startingNum;

    // Set a new timer up to call this function
    timer = setTimeout(counter, 1000); 
  }   
}

// Start the process off
timer = setTimeout(counter, 1000);
<div id="countdown"></div>
...