在JavaScript中设置行之间的暂停时间

Question

我是Javascript的新手，正在尝试以下代码

var output = document.getElementById('output');
console.dir(output);
console.log(output.baseURI);
console.log(output.clientWidth);
console.log(output.outerHTML);
setTimeout(() => { output.innerText = "Thank You"; }, 3000);
setTimeout(() => { output.innerHTML = "Thank You Very Much"; }, 3000);

在这一点上，output.innerText = "Thank You";，我希望看到"谢谢"，因为我把等待时间定为3秒，但这根本没有发生，我根本看不到"谢谢"如何轻松设置等待的暂停点，以便观察每个变化？以及如何在JavaScript中逐行调试？

Answer 1

两个回调将几乎同时运行。如果您希望第二个回调从第一个回调偏移三秒，请在第一个回调启动后设置：

setTimeout(() => { 
output.innerText = "Thank You";
setTimeout(() => { output.innerHTML = "Thank You Very Much"; }, 3000);
}, 3000);

另请参阅https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

---快速解释---

当您调用setTimeout(() => {}, 3000)时，JS引擎不会停止并等待三秒。它只注册了大约3000毫秒内要调用的回调，然后继续。
假设引擎需要1ms才能执行该行，而我们从0ms开始。然后，您的第一次回调将在3001毫秒内执行，下一次回调将于3002毫秒(约(内执行。由于您的计算机速度太快，您永远不会看到第一次回调的结果，因为它会立即被下一次调用覆盖。

Answer 2

您也可以这样做。

var output = document.getElementById('output');
setTimeout(function(){
output.innerHTML = "Thank You";
setTimeout(function(){
output.innerHTML = "Thank You Very Much";
}, 3000);
}, 3000);