gpt4 book ai didi

JavaScript。带有 innerHTML 的循环在循环执行期间不会更新

转载 作者:数据小太阳 更新时间:2023-10-29 04:59:28 25 4
gpt4 key购买 nike

我试图在每个循环中从 Javascript 刷新一个 div 并查看 1, 2, 3, .... 以下代码有效,但仅显示最终结果 (9998)。 如何显示所有步骤? 提前谢谢你。

<html>
<head>
</head>
<body>

<div id="cadre" style="width=100%;height=100%;">
<input type="button" value="Executer" onclick="launch();"/>
<div id="result" ></div>
</div>

<script type="text/javascript">
function launch(){
for (inc=0;inc<9999;inc++){
document.getElementById('result').innerHTML = inc;
}
}
</script>

</body>
</html>

最佳答案

JavaScript 执行和页面呈现在同一个执行线程中完成,这意味着当您的代码正在执行时,浏览器不会重绘页面。 (虽然即使它在 for 循环的每次迭代中都重新绘制页面,它也会非常快,以至于您实际上没有时间查看各个数字。)

您要做的是使用 setTimeout()setInterval() 函数(window 对象的两种方法)。第一个允许您指定一个函数,该函数将在设定的毫秒数后执行一次;第二个允许您指定一个函数,该函数将在指定的时间间隔内重复执行。使用这些,在您的代码执行之间会有“空格”,浏览器将有机会重绘页面。

那么,试试这个:

function launch() {
var inc = 0,
max = 9999;
delay = 100; // 100 milliseconds

function timeoutLoop() {
document.getElementById('result').innerHTML = inc;
if (++inc < max)
setTimeout(timeoutLoop, delay);
}

setTimeout(timeoutLoop, delay);
}

请注意,timeoutLoop() 函数通过 setTimeout() 调用自身 - 这是一种非常常见的技术。

setTimeout()setInterval() 都会返回一个 ID,该 ID 本质上是对已设置计时器的引用,您可以将其与 clearTimeout( )clearInterval() 来取消任何尚未发生的排队执行,因此另一种实现函数的方法如下:

function launch() {
var inc = 0,
max = 9999;
delay = 100; // 100 milliseconds

var iID = setInterval(function() {
document.getElementById('result').innerHTML = inc;
if (++inc >= max)
clearInterval(iID);
},
delay);
}

显然,您可以根据需要改变延迟。请注意,在这两种情况下,inc 变量都需要在计时器执行的函数之外定义,但是由于闭包的魔力,我们可以在 launch():我们不需要全局变量。

关于JavaScript。带有 innerHTML 的循环在循环执行期间不会更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8110905/

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