JavaScript worker : how to check if a message was received while running expensive task

Question

我有一个非常昂贵的任务在 Worker 上运行，类似于此

for(var i = 0; i < 1000000000; i++)
    //operations using i...

我怎样才能在那个循环中检查是否收到了 worker 所有者要求它停止的消息？我想要这样的东西

for(var i = 0; i < 1000000000; i++)
    if(windowDidNotAskToStop())
        //operations using i...

现在我注册了一个 onmessage 函数，这样我就可以开始收听来自所有者的消息，但是当我的循环运行时它被阻止了(很明显)。

我想象来自所有者的 postMessage 调用在某个地方排队，所以我只需要访问它就可以从我的循环内部处理调用。

Answer 1

您必须像往常一样处理事件并设置标志，但请确保为在循环中接收事件留出时间，可能使用 setTimeout:

var exitLoop = false;

(function loop(i) {
    if (exitLoop || i >= 1000000000) {
        return;
    }

    // …

    setTimeout(function () {
        loop(i + 1);
    }, 0);
})(0);

onmessage = function (e) {
    if (e.data === 'stop') {
        exitLoop = true;
    }
};

或者，作为一般效用函数:

function asyncIterateRange(start, end, callback) {
    var exitLoop = false;
    var doneCallbacks = [];

    (function loop(i) {
        if (exitLoop) {
            return;
        }

        if (i >= end) {
            doneCallbacks.forEach(function (callback) {
                callback();
            });

            return;
        }

        callback(function () {
            setTimeout(function () {
                loop(i + 1);
            }, 0);
        });
    })(start);

    return {
        abort: function abort() {
            exitLoop = true;
        },
        done: function addDoneCallback(callback) {
            doneCallbacks.push(callback);
        }
    };
}

像这样使用它:

var innerIterator;
var outerIterator = asyncIterateRange(0, 1000000, function outerLoop(next) {
    innerIterator = asyncIterateRange(0, 1000, function innerLoop(next) {
        // …
        next();
    }).done(next);
});

// To stop:
if (innerIterator) {
    innerIterator.abort();
}

outerIterator.abort();