gpt4 book ai didi

javascript - 在javascript中将时间停止几秒钟

转载 作者:行者123 更新时间:2023-11-27 23:31:52 24 4
gpt4 key购买 nike

我的代码:

<!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(实际上是所有数字)。为什么控制台与显示不同步?是否存在其他方法来阻止指令之间的时间?

最佳答案

你的函数无法工作的原因基本上是,直到一切运行完成一秒钟后,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);
<div>
Counter: <span id="output">X</span>
</div>

关于javascript - 在javascript中将时间停止几秒钟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34500578/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com