Javascript Web Worker - How to ignore all messages except the last one?

Question

I have a series of UI sliders (dat.GUI) and I am posting the slider values to the web worker whenever a UI slider has changed.
The calculations done in the worker need about 3-8 seconds until the worker posts back the information I need.

In case the UI interface is used in a fast rate (e.g. five of the sliders are changed before the first calculation is done), the worker has still received five messages and will still respond to each one of them, with each new information overwriting the last one. Is there any way for the worker to ignore the in-between messages and only perform the calculations with the last received message before the current calculation was finished?

I am a beginner on workers so for now I am only using the Worker.onmessage property and Worker.postMessage() method.

Answer 1

This doesn't have all that much to do with WebWorker. This seems like a typical debounce use case. The problem here is that once your worker receives a message, how does it know it's the last one? It can't tell the future. It doesn't know if user will make another UI interaction in the near future. So the solution to this kind of problems is debounce. The idea is that you don't execute your code right away, but wait slightly, say 200ms. Within this period of time, if there was another message, then it will wait another 200ms without doing anything. You can implement something like this on your own, or you can import and use one of the existing libraries like underscore.js

EDIT: Here is an example using underscore.js/lodash (both have similar API). Suppose originally, your code was something like this:

onmessage = function(e) {
    var params = e.data.something;
    // TODO: Do something with params.
};

With debounce, you will rewrite it as...

onmessage = _.debounce(function(e){
    var params = e.data.something;
    // TODO: Do something with params.
}, 200);

What's happening here is that _.debounce returns a wrapper function that can be called as frequently as it needs. However it will not trigger the function wrapped inside immediately. It schedules it to execute in 200ms (tweak this for your needs). During this period, if there was another call, the previously scheduled execution will be canceled, and a new execution will be scheduled in 200ms at this point. When time is up, your function will be executed with the latest version of arguments. Now you are probably wondering about what happens to the arguments from previous calls? The answer is they are simply discarded by the wrapper function. Notice that arguments passed to onmessage are passed to the wrapper function first, which keeps only the latest one to be passed to the wrapped function. You can play with the fiddle I created here to see it in action. Another note I want to add is that you can do this debounce logic on your main thread too before passing it to WebWorker.

EDIT: In case you need a guide on how to import a third-party library in WebWorker. https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Importing_scripts_and_libraries