如何在JavaScript中在1秒内精确执行1000次代码

Question

​

n = 0;
var timer = setInterval(function() {
    if (n == 0) {
        console.log(new Date());
    }
    // execute some other code here
    n++;
    if (n == 1000) {
        clearInterval(timer);
        console.log(new Date());
    }
}, 1);

​

这段代码大约在3-4秒内执行，可能取决于机器和浏览器。怎么才能让它在1秒内执行呢？

Answer 1

这里演示了每次迭代一个定时器的方法。对同一个回调执行1000次“迭代”大约需要1秒。这个设计很粗糙，因为它只是一个例子。

https://jsfiddle.net/hnhudp8h/

​

//Function to compose the array of timers
function timers(count, callback){
  var timers = [];
  for(var i = 0; i < count; i++){
    timers.push(timer(callback,i));
  }
  return timers;
};
//Function to compose individual timer
function timer(callback, delay){
  return function(){
    setTimeout(callback,delay);
  };
};

//Usage
console.log("Start:",new Date()); //timestamp

var display = document.querySelector("#display");

var settings = { n : 0 };

display.innerHTML = settings.n;

//Arrange timers and callback
var set = timers(1000,function(){
    this.n++;
		display.innerHTML = this.n;
    if(this.n === 1000) console.log("End:",new Date());
}.bind(settings));

//Execute timers
for(var i = 0; i < set.length; i++){ set[i](); }

<div id="display">
</div>

​

所有浏览器都以不同的方式处理这一问题。在大多数浏览器中，特别是chrome，任务执行的默认最小时间(如使用间隔或超时)为4毫秒。

4ms窗口的结果是，您的1000次迭代大约在4秒内完成。因此，很明显，在1000次迭代中，这比预期的1秒长。

没有理想的(可能的？)在现代浏览器中执行时，在JavaScript中完成精确的1毫秒迭代的方法。如果空间(内存和处理能力)不是问题，最好的选择是手动为每次迭代创建一个定时器，然后执行它们的整个集合。当然，这也有它自己的问题，比如每个任务是否在它应该执行的时候都被执行。

Answer 2

浏览器中的Javascript计时器是不准确的(C更适合这种用法)。

但是，平均精度越高，延迟越高，尤其是避免低值，比如1ms。

很难在1秒内对一个函数进行1000个时间均匀的调用。一个毫秒是一个很低的值，触发函数本身的简单执行(加上处理定时器的开销)可能要花费近1ms(或更多)的时间.这意味着JS解释器在1ms之后调用函数，执行代码，然后设置一个新的1ms定时器。因此，在呼叫之间有超过1ms。

JS解释器执行类似的操作

At t   call function     <-- this takes
       execute function  <-- some 
at t+x set new 1ms timer <-- time
etc...

但是，如果您能够在更接近1秒的时间范围内结束该进程(比现在的3-4秒)，尽可能多地执行1 ms调用，这是可能的。

var n = 0;

var timer= setInterval(function(){
          if(n++ == 0) {
                console.log(new Date());
          }
     }, 1);

setTimeout(function() {
         clearInterval(timer);
         console.log("Got n="+n+" at "+(new Date()));
     }, 1000);

这基本上和你的程序相同

• n每1ms递增一次。
• 然而，进程的结束是由另一个1秒定时器控制的。

在Chrome中，我得到了252 n增量，这两个日期相距约1秒。

Answer 3

在ECMA Script 6中尝试相同的脚本

​

'use strict';

var n = 0;

var timer = setInterval(() => { 
    n++;
}, 1);
console.log( new Date() );

setTimeout(() => {
 clearInterval(timer);
 console.log("Final N Value: "+n+" at "+ (new Date()) );
}, 1000);

​