javascript - 在异步时序中调用 Javascript 函数

Question

我正在开发一个 Canvas 应用程序，它使用 2 个网络 worker 来计算一些帧。您可以在下面看到每个工作人员如何将特定帧发送回主线程。

在主线程上，我为每个工作人员设置了一个事件监听器。它们监听帧，并在收到帧时将其发送到名为 drawFrameToCanvas

的函数

这看起来很简单，但我的问题是这些网络 worker 可能会乱序发送数据。所以 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
}