我刚刚开始学习 JavaScript，来自 Java/Clojure 背景，我正在尝试执行一个简单的线程 sleep 命令，该命令允许我以一秒的间隔在屏幕上显示文本行。我考虑过使用 setInterval 函数来代替，但因为我正在处理多个函数，所以我认为 setTimeout 会更好。我遇到的问题是所有文本都会立即在浏览器中打印，就好像 setTimeout 函数甚至不存在一样。下面是一个使用“生日快乐”歌曲的示例，我认为它简洁地说明了问题。如何使下面的程序以一秒的间隔逐行运行？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Happy Birthday</title>
</head>
<body>
<script>
var name = "Joe",
i = 0;
while (i < 2) {
setTimeout(document.write("Happy Birthday to you!<br>"), 1000);
i ++;
}
setTimeout(document.write("Happy Birthday dear " + name + ",<br>"), 1000);
setTimeout(document.write("Happy Birthday to you!<br>"), 1000);
</script>
</body>
</html>
最佳答案
为了延迟某些代码的计算，应该将该代码放入一个函数中；该函数引用应该传递到 setTimeout 中。例如:
setTimeout(function() {
document.write('Hello world!');
}, 1000);
就目前情况而言，您评估 document.write 表达式而不是立即 - 这就是为什么您会看到所有写入同时发生。
作为旁注，请不要使用 document.write ，除非您真的知道自己在做什么。只需调整 log 元素的 innerHTML 即可轻松“记录”某些内容。例如:
<div id="log"></div>
<script>
var log = document.getElementById('log');
setTimeout(function() {
log.innerHTML += 'Hello world!<br />';
}, 1000);
</script>
另外，不要忘记每个超时都是独立处理的。要设置事件链，您需要手动增加延迟 - 否则所有函数几乎都会立即调用。
总的来说，具体方法如下:
<div id="log"></div>
<script>
var name = "Joe",
i = 0,
delayedMessage = function(msg) {
setTimeout(function() {
document.getElementById('log').innerHTML += msg;
}, ++i * 1000);
};
delayedMessage("Happy Birthday to you!<br>");
delayedMessage("Happy Birthday to you!<br>");
delayedMessage("Happy Birthday dear " + name + ",<br>");
delayedMessage("Happy Birthday to you!<br>");
</script>
Demo .
关于javascript - 如何在 HTML 脚本标记中使用 Javascript 对浏览器中的连续事件进行计时？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25827898/