以异步时序调用Javascript函数

Question

我正在使用2个网络工作者来计算一些帧的画布应用程序。您可以在下面看到每个工作程序如何将特定帧发送回主线程。

在主线程上，每个工人都有一个事件侦听器。他们监听框架，并在收到框架后将其发送到名为 drawFrameToCanvas

的函数。

这似乎很简单，但是我的问题是这些网络工作者可能会无序发送数据。因此， worker2 可以在 worker1

之前完成。

我认为解决此问题的方式如下：

var desiredFrame = 0;
function drawFrameToCanvas(frameData, frameNumber){

  if(frameNumber != desiredFrame){ //this is the wrong frame
    //wait until it's the correct frame
    setTimeout(function(){ drawFrameToCanvas(frame, frameNumber) }, 10);
  }

}

但是，在第0帧结束时，已请求绘制第1帧几次。所以这没有用。然后，我想到了制作一个对象，该对象将存储帧数据，并为此对象调用drawFrameToCanvas函数。

但是，如果不将所有帧存储在内存中，我想不出一个好方法，因为将始终引用此对象，并且永远不会清除该对象以进行垃圾收集。

在这种情况下，有没有更好的方法来调用javascript函数？

Answer 1

您可以为结果创建队列，并在处理队列时从队列中删除数据，以避免提到的内存问题。像这样：

var worker1Results = []; 
var worker2Results = [];

worker1.onmessage = function(e){
    worker1Results.push(e.data);
    performActionWhenBothDone();
}

worker2.onmessage = function(e){
    worker2Results.push(e.data);
    performActionWhenBothDone();
}

function performActionWhenBothDone(){
    if (worker1Results.length && worker2Results.length) {
        performAction(worker1Results.shift(), worker2Results.shift());
    }
}

function performAction(worker1Result, worker2Result){
    //drawFrameToCanvas code
}