Question

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>

Answer 1

我建议使用window.requestAnimationFrame而不是setTimeout或setInterval，因为它允许您等待浏览器呈现更改，然后立即执行一些代码。所以基本上您可以做到：

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

我将您的函数更改为递归。这样，我可以调用该函数以呈现window.requestAnimationFrame回调中的下一个数字。这是必要的，因为我们应该等待浏览器呈现当前数字，然后紧接着指示浏览器呈现下一个数字。在window.requestAnimationFrame循环中使用for无效。

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>

Answer 2

以下使用setTimeout的示例代码最多只能计算100个示例。

可能想签出Difference between setTimeout with and without quotes and parentheses

然后还有：'setInterval' vs 'setTimeout'

var delayId = null, frameTime = 25, countTo = 100, el, nn = 0;
function increment(e) {
  if (delayId) {
    window.clearTimeout(delayId);
  }
  el.textContent = nn++;
  if (nn <= countTo) {
    delayId = window.setTimeout(increment,frameTime);
  }
}
window.onload = function() {
    el = document.getElementById('herethenumbers');
    var b = document.getElementById('start');
    b.addEventListener("click",increment,false);
}

<button type="button" id="start">Show the numbers one at a time!</button>
<p id="herethenumbers">00</p>

Answer 3

使用 Jan-Luca Klees 建议的 requestAnimationFrame 是解决我的问题的方法，这里是使用requestAnimationFrame的简单示例。允许您运行一个或多个长时间的过程，并与屏幕上的对象进行交互（例如弹出窗口或其他弹出窗口），requestAnimationFrame告诉浏览器您要运行动画，并且您希望浏览器调用特定的功能来更新动画动画。

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

<button type="button" onclick="startProcesses();">Start long duration process!</button>
<p id="status">Waiting to start processes</p>

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

var current_process = 1;
var total_process = 2; 
var startEnd = 'S';

function startProcesses() {                   

    function step(timestamp) {
        if(current_process==1 && startEnd=='E') res = process1();
        if(current_process==2 && startEnd=='E') res = process2();       
        //..n processes

        if(startEnd=='S') el.innerHTML = "Process #"+current_process+" started..";
        if(startEnd=='E') el.innerHTML = "Process #"+current_process+" "+res;

        if(startEnd=='S' || current_process<total_process) {
            if(startEnd=='E') current_process++;
            startEnd = (startEnd=='S'?'E':'S'); 
            window.requestAnimationFrame(step);     
        }else{
            el.innerHTML = "Process #"+current_process+" "+res;
        }
    }
    window.requestAnimationFrame(step);
}

function process1() {                
    for(var nn=0;nn<=10000;nn++){  
        console.log(nn);
    }
    return "Success!"; //or Fail! if something went wrong
}
function process2() {                                
    for(var nn=0;nn<=10000;nn++){  
        console.log(nn);
    }
    return "Success!"; //or Fail! if something went wrong
}
</script>
</body>
</html>

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

3 个答案: