Question

我试图让WebWorker计数到100并更新一个值为I的div，目前div只是直接更新为100并且似乎忽略了间隔....

JavaScript（网络工作者文件）：

 self.addEventListener('message', function (e) {

        switch (e.data) {

            case 'Hi Worker':
                postMessage('Hi Boss');
                break

            case 'Count to 100':
                var i;
                for (i = 0; i < 100; i++) {
                    setInterval(postMessage(i + 1), 1000);
                }

                break;
            default:
                self.postMessage("Not sure how to help with that");
        }

    }, false);

主要文件：

           <script>
            var worker = new Worker('worker.js');

            worker.addEventListener('message', function (e) {
                console.log("worker said: " + "'" + e.data + "'");
                document.getElementById("workerComms").textContent = "worker said: " + e.data;
            }, false);       

        </script>
    </head>
    <body>

        <button onclick="worker.postMessage('Hi Worker');return false;">Say 'Hi Worker'</button>
            <button onclick="worker.postMessage('Count to 100');return false;">Count to 100</button>

            <div id="workerComms">Things workers say...</div>

Answer 1

setInterval(postMessage(i + 1), 1000); 调用 postMessage(i + 1)，然后将返回值传递到setInterval，与foo(bar()) 调用的方式完全相同 bar并将返回值传递给foo。

相反：

您希望将函数引用传递给setInterval
您想使用setTimeout，而不是setInterval
你想要改变超时，因为否则它们会在一秒钟之后叠加在一起

喜欢：

for (i = 1; i <= 100; i++) {
    setTimeout(postMessage.bind(window, i), 1000 * i);
}

可能会这样做。以1秒的间隔安排100个计时器。它使用postMessage.bind(window, i)来创建一个函数，在调用时，所有postMessage this设置为window并传入i作为第一个参数。我从i到1而不是100到0进行了99，以避免在我使用它的两个地方都添加1

或者，您可以完全抛弃for循环并使用setInterval或链式系列setTimeout。这是setInterval：

var i = 0;
var timer = setInterval(function() {
    postMessage(++i);
    if (i >= 100) {
        clearInterval(timer);
    }
}, 1000);

HTML5 WebWorkers，定时功能

1 个答案: