javascript - 如何确保 setInterval 的回调完全按照指定的时间间隔调用？

Question

这个问题已经有答案了:

setInterval timing slowly drifts away from staying accurate (6 个回答)

How to create an accurate timer in javascript? (15 个回答)

已关闭 5 年前。

以这个函数为例:

function mySlowFunction(baseNumber) {
    console.time('mySlowFunction');
    var result = 0; 
    for (var i = Math.pow(baseNumber, 10); i >= 0; i--) {       
        result += Math.atan(i) * Math.tan(i);
    };
    console.timeEnd('mySlowFunction');
    return result;
}

这是一个非常占用 CPU 资源的函数。 mySlowFunction(5) 大约需要 3 秒才能完成。

现在考虑这段代码:

setInterval(() => console.log("interval"), 1000); 
mySlowFunction(5);

我希望它每秒记录“间隔”，但我明白，因为 mySlowFunction是在线程上运行的，JS是单线程的，setInterval的回调仅在 mySlowFunction 之后执行完成。

有什么方法可以确保在指定的时间间隔调用回调吗？我希望在基于浏览器的环境中实现这一点。

Answer 1

您不应期望间隔在指定的延迟后触发。
Here -> ( Reasons for delays longer than specified ) 有几个原因导致延迟时间可能比预期更长。无论如何，如果您仍然想确保您的间隔在 mySlowFunction 完成执行之前触发，您可以如评论中所述使用 Worker

The Worker interface of the Web Workers API represents a background task that can be easily created and can send messages back to its creator.

将 mySlowFunction 的计算分配给不同的线程。

这是一个例子:

var blobWorker = URL.createObjectURL( new Blob([ '(',
    function() {
        self.onmessage = function(e) {
          
        	var result = 0; 
        	for (var i = Math.pow(e.data, 10); i >= 0; i--) {
            result += Math.atan(i) * Math.tan(i);
        	};
        	
          self.postMessage(result);
        };
    }.toString(),
')()' ], { type: 'application/javascript' } ) );

var worker = new Worker( blobWorker );

worker.onmessage = function(e) {

    console.log("result from mySlowWorker:", e.data);
}

var intervalId = setInterval(() => console.log("interval"), 1000);

worker.postMessage(5);

URL.revokeObjectURL( blobWorker );

setTimeout( _ => { clearInterval(intervalId); console.log('done') }, 5000)