解决:setInterval在浏览器后台无法正常运行。

参考资料

Worker

什么是“Web Worker”

“Web Worker”为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外,他们可以使用XMLHttpRequest执行 I/O。一旦创建, 一个worker 可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序(反之亦然)。

使用方法

下面的示例代码,我们实现一个最简单的定时器,让它每100毫秒触发一次。

            var timmer = new Worker(
    URL.createObjectURL(
        new Blob(
            [
                "onmessage=function(event){setInterval(function(){postMessage(1);},100)}",
            ],
            { type: "application/javascript" }
        )
    )
);
timmer.onmessage = function (event) {
    console.log("get message");
};
timmer.postMessage("start");
        

标准使用方法

上面的示例中,我们使用createObjectURL创建了一个地址,由于我们需要执行的代码比较简单所以采用这个方式会更简洁。当我们需要执行的任务中的代码比较复杂的时候,我们可以把任务单独写成一个独立的js文件。具体可以参考下面的代码。还有更多更详细的使用介绍,可以参考文章顶部的参考资料。

            var timmer = new Worker('worker.js');