Javascript Web Worker - Как игнорировать все сообщения, кроме последнего?

Question

У меня есть ряд слайдеров пользовательского интерфейса (dat.GUI), и я отправляю значения слайдера веб-работнику всякий раз, когда слайдер пользовательского интерфейса изменился.
Расчеты, выполненные работнику, должны составлять около 3-8 секунд, пока работник не отправит обратно необходимую мне информацию.

В случае, если интерфейс интерфейса используется с высокой скоростью (например, пять ползунков изменены до завершения первого расчета), рабочий все еще получил пять сообщений и все равно будет реагировать на каждый из них, причем каждый новый переписывая последнюю. Есть ли способ для работника игнорировать промежуточные сообщения и выполнять вычисления только с последним полученным сообщением до завершения текущего расчета?

Я начинаю работать с рабочими, поэтому на данный момент я использую только свойство Worker.onmessage и метод Worker.postMessage().

Answer 1

Это не имеет ничего общего с WebWorker. Это похоже на типичный вариант использования debounce. Проблема здесь в том, что как только ваш рабочий получит сообщение, как он узнает, что он последний? Он не может сказать о будущем. Он не знает, сделает ли пользователь другое взаимодействие с пользовательским интерфейсом в ближайшем будущем. Таким образом, решение подобных проблем - это отговорка. Идея состоит в том, что вы не выполняете свой код сразу, но подождите немного, скажем, 200 мс. В течение этого периода времени, если было другое сообщение, тогда он будет ждать еще 200 мс, ничего не делая. Вы можете реализовать что-то подобное по своему усмотрению, или вы можете импортировать и использовать одну из существующих библиотек, как underscore.js

EDIT: Вот пример использования underscore.js/lodash (оба имеют аналогичный API). Предположим первоначально, ваш код был что-то вроде этого:

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

С дребезга, вы будете переписывать его как ...

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

То, что здесь происходит, что _.debounce возвращает функцию-оболочку, которая может быть вызвана как это часто бывает необходимо. Однако это не приведет к немедленной активации функции, завершенной внутри. Он планирует его выполнить в 200 мс (подстройте его для своих нужд). В течение этого периода, если был другой вызов, ранее запланированное выполнение будет отменено, а новое исполнение будет запланировано на 200 мс на этом этапе. Когда время закончится, ваша функция будет выполнена с последней версией аргументов. Теперь вы, вероятно, задаетесь вопросом, что происходит с аргументами предыдущих вызовов? Ответ заключается в том, что они просто отбрасываются функцией обертки. Обратите внимание, что аргументы, переданные в onmessage, сначала передаются в функцию-оболочку, которая сохраняет только последнюю, которая будет передана в завернутую функцию. Вы можете играть с созданным здесь fiddle, чтобы увидеть его в действии. Еще одно примечание, которое я хочу добавить, это то, что вы можете сделать эту логику debounce в своем основном потоке, прежде чем передавать его в WebWorker.

EDIT: Если вам необходимо руководство по импорту сторонней библиотеки в WebWorker. https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Importing_scripts_and_libraries