javascript - 正确使用setTimeout

Question

我正在尝试使其成为 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

Answer 1

两个问题:

• 调用 setTimeout 仅将函数排队以在超时到期后执行 - 它不会暂停主线程。

• document.write 是 document.wrong，通常 - 如果文档已经被解析，它将被新的 HTML 字符串替换。请改用正确的 DOM 方法。

您可以await每秒 promise 并附加spans:

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);
}