我的代码:
<!DOCTYPE html>
<html>
<body>
<button id="start" onClick="myFunction()">Start</button>
<div id="output"></div>
<script>
function myFunction() {
for(i=3; i>0; i--) {
console.log(i);
document.getElementById('output').innerHTML = i;
pause(5000);
}
}
function pause(milliseconds) {
var dt = new Date();
while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}
</script>
</body>
</html>
数字3,2和1以5秒的间隔出现在控制台中,但是div在15秒后出现数字1(实际上是所有数字)。为什么控制台与显示器不同步?是否存在其他方法来停止指令之间的rime?
答案 0 :(得分:1)
您的函数无法工作的原因基本上是DOM更改未经处理和显示,直到所有内容都运行一秒钟。使其工作的最简单方法可能是调用setTimeout
,等待一段特定的时间然后调用提供的函数。例如,您可以使用以下函数使代码正常工作。
此函数通过setTimeout
调用递归调用自身以确保DOM已被更新。
function myFunction(i) {
(function doStuff() {
console.log(i);
document.getElementById('output').innerHTML = i;
i -= 1;
if (i >= 0) {
setTimeout(doStuff, 5000);
}
}());
}
myFunction(3);
&#13;
<div>
Counter: <span id="output">X</span>
</div>
&#13;