javascript - 如何使用间隔将 Angular 范围绑定(bind)到网络 worker 的结果？

Question

我需要根据网络 worker 的“回调”从我的范围更新一个变量。这些 web workers 基本上是一个以特定时间间隔返回值的时间间隔。

这是我的 worker.js

var timer = false;
var onmessage = function (e) {
    var value = e.data[0];
    var stock = e.data[1];
    var interval = e.data[2];

    if (timer) {
        clearInterval(timer);
    }

    timer = setInterval(function () {
        stock += value;
        postMessage(stock);
    }, interval)
}

我知道如何使用 promise 从 web worker 获取结果，但正如我所料，它只适用于第一次回调。

app.factory('workerServices', ['$q', function ($q) {
    var worker = new Worker('worker.js'),
        defer = $q.defer();

    worker.onmessage = function (e) {
        console.log('Result worker:' + e.data); //displayed each "interval"
        defer.resolve(e.data);
    }

    return {
        increment: function (value, stock, interval) {
            defer = $q.defer();
            worker.postMessage([value, stock, interval]);
            return defer.promise;
        }
    };
}]);

app.controller('mainCtrl', ['$scope', 'workerServices', function ($scope, workerServices) {
    var value = 1,
        stock = 0,
        interval = 300;

    workServices.increment(val, stock, interval).then(function (newStock) {
        $scope.stock = newStock; //updated once

    });
}]);

所以我尝试将结果直接绑定(bind)到范围以查看它是否有效(我不喜欢这样做，因为我想为我的网络 worker 使用工厂)。

但它没有用。我不知道为什么，但即使 console.log 正常工作，我的范围也保持不变。

app.controller('mainCtrl', function ($scope) {
    var value = 1,
        stock = 0,
        interval = 300;

    var worker = new Worker('worker.js');
    worker.postMessage([value, stock, interval]);
    worker.onmessage = function (e) {
        console.log(e.data) //properly displayed
        $scope.result = e.data; // never updated
    };
});

我在这里错过了什么？我怎样才能“连续”更新一个变量从我的范围到网络 worker 的结果？

Answer 1

Webworker 事件 onmessage 发生在 Angular 上下文之外，因此 Angular 摘要系统不知道要更新绑定(bind)。在这种情况下，我们需要通过调用 $scope.$apply() 明确说明 angular 以手动启动摘要循环。

我宁愿使用 $timeout，这将是应用摘要循环的最安全方式。因为有时直接运行 $apply 方法会导致 digest cycle is in already progress 与当前正在运行的循环冲突的错误。

worker.onmessage = function (e) {
    console.log(e.data) //properly displayed
    $timeout(function(){
       $scope.result = e.data; // never updated
    });
};