gpt4 book ai didi

javascript - JavaScript 函数运行时 HTML 页面不更新

转载 作者:行者123 更新时间:2023-11-30 11:07:25 25 4
gpt4 key购买 nike

Chrome ,FF。 Opera 和可能其他浏览器在进程结束时仅显示 100000 数字,但我希望看到按顺序 1..2..3..4...100000 显示。此代码无法正常工作:

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

<button type="button" onclick="showSequence();">Show the numbers one at a time!</button>
<p id="herethenumbers">00</p>

<script>
function showSequence() {
el = document.getElementById('herethenumbers');
for(var nn=0;nn<=100000;nn++){
el.innerHTML = nn;
}
}
</script>
</body>
</html>

当您不知道给定进程的执行时间并且甚至更改主 div 对象的属性(例如可见性)对我不起作用时,window.setTimeout 是不可能使用的。

非常感谢。


更新

这里是部分解决方案。

允许您查看一个长进程的状态,不幸的是,目前只有(单个)进程的开始和结束。

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

<button type="button" onclick="executeMultiLongProcess();">Launch and monitoring long processes!</button>
<p id="statusOfProcess"></p>

<script>
var el = document.getElementById('statusOfProcess');

function executeMultiLongProcess() {
processPart1();
}
function processPart1() {
el.innerHTML = "Start Part 1";
setTimeout(function(){
for(var nn=0;nn<=100000000;nn++){ //..
}
el.innerHTML = "End Part 1";
window.setTimeout(processPart2, 0);
},10);
}
function processPart2() {
el.innerHTML = "Start Part 2";
setTimeout(function(){
for(var nn=0;nn<=100000000;nn++){ //..
}
el.innerHTML = "End Part 2";
window.setTimeout(processPartN, 0);
},10);
}
function processPartN() {
el.innerHTML = "Start Part N";
setTimeout(function(){
for(var nn=0;nn<=100000000;nn++){ //..
}
el.innerHTML = "End Part N";
},10);
}
</script>
</body>
</html>

最佳答案

我想建议使用 window.requestAnimationFrame而不是 setTimeoutsetInterval,因为它允许您等待浏览器呈现更改,然后立即执行一些代码。所以基本上你可以这样做:

window.requestAnimationFrame( () => {
el.innerHTML = nn;
} );

我把你的函数改成了递归的。这样我就可以调用函数在 window.requestAnimationFrame 回调中呈现下一个数字。这是必要的,因为我们应该等待浏览器呈现当前数字,然后指示浏览器呈现下一个数字。在 for 循环中使用 window.requestAnimationFrame 将不起作用。

el = document.getElementById( 'herethenumbers' );

function showSequence( nn=0 ) {
if( nn <= 100000 ) {
window.requestAnimationFrame( () => {
el.innerHTML = nn;
showSequence( nn + 1 );
} );
}
}
<button type="button" onclick="showSequence();">
Show the numbers one at a time!
</button>

<p id="herethenumbers">00</p>

关于javascript - JavaScript 函数运行时 HTML 页面不更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55091016/

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