Calling Javascript functions in async timing

Question

I'm working on a canvas application that uses 2 web-workers to calculate some frames. You can see below how each worker sends a specific frame back to the main thread.

On the main thread I have an event listener for each worker. They listen for the frame, and when they receive it, they send it to a function called drawFrameToCanvas

This seems simple enough, but my problem is these webworkers can send their data out of order. So worker2 can finish before worker1

The way I thought to fix this problem is like this:

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);
  }

}

However by the time frame 0 is finished, frame 1 has been requested to be drawn several times. So this didn't work. I then thought about making an object that would store the frame data and have the drawFrameToCanvas function call for this object.

However I couldn't think of a good way to do this without storing all the frames in memory as this object would always be referenced and never cleared for garbage collection.

Is there a better way to call javascript functions in these circumstances?

Answer 1

You can create queues for the results, and remove the data from the queues as they're processed to avoid the memory issues you mentioned. Something like this:

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
}