Правильное использование setTimeout - PullRequest
Новая
       5

Правильное использование setTimeout

0 голосов
/ 25 июня 2018

Я пытаюсь сделать так, чтобы он document.write () 9, затем пауза 1 секунда, запись 8, затем пауза 1 секунда, запись 7, затем пауза 1 секунда, и так далее, и так далее, пока не достигнет0. Но сейчас он просто распечатывает все сразу.Что я делаю не так? 

var delay = function(){
setTimeout(delay, 1000); // check again in a second
}

var count = 10;
while (count > 0) {
count--;
delay();
document.write(count);
}

9876543210

Ответы [ 3 ]

0 голосов
/ 25 июня 2018

Две проблемы:

  • Вызов setTimeout ставит в очередь только функцию, выполняемую по истечении времени ожидания - она ​​не приостанавливает основной поток.

  • document.write - это document.wrong, обычно - если документ уже проанализирован, он будет заменен новой строкой HTML.Вместо этого используйте правильные методы DOM.

Вы можете await обещания каждую секунду и добавлять span s: 

const delay = () => new Promise(res => setTimeout(res, 1000));
(async () => {
  let count = 10;
  while (count > 0) {
    await delay();
    count--;
    document.body.appendChild(document.createElement('span')).textContent = count;
  }
})();

Вы также можете (синхронно) устанавливать таймауты для каждой итерации: 

for (let count = 9; count >= 0; count--) {
  setTimeout(() => {
    document.body.appendChild(document.createElement('span')).textContent = count;
  }, (10 - count) * 1000);
}
0 голосов
/ 25 июня 2018

Вот пример использования setInterval и console.log

var count = 9;

var timer = setInterval(delay, 1000);

function delay() {
  console.log(count--);
  if(count<0)
    clearInterval(timer);
}
0 голосов
/ 25 июня 2018

setTimeout асинхронный, он не приостанавливает выполнение. 

var count = 10;
var delay = function(){
  if (count > 0) {
    count--;
    document.write(count);
    setTimeout(delay, 1000); // check again in a second
  }
}
delay();

Это может сработать, но я не думаю, что document.write работает после завершения загрузки страницы. Это означает, что вы не можете вызвать его в обратном вызове тайм-аута.

...