JavaScript Web Worker - 如何忽略除最後一個之外的所有消息？

我有一系列的UI滑塊（dat.GUI），我只是在UI滑塊發生變化時將滑塊值發佈到網絡工作者。
工人完成的計算需要大約3-8秒，直到工人回傳我需要的信息。

如果UI界面的使用速度很快（例如在完成第一次計算之前更換了五個滑塊），工作人員仍然收到五條消息，並且仍然會響應每個消息，每個新消息信息覆蓋最後一個。有沒有辦法讓工作人員忽略中間消息，並且只在當前計算完成之前用最近收到的消息執行計算？

我是一名初學者，所以現在我只使用Worker.onmessage屬性和Worker.postMessage（）方法。JavaScript Web Worker - 如何忽略除最後一個之外的所有消息？

來源

2015-07-11 des

告訴我們關於您的建築的更多信息。現在的工人怎麼會是最後的信息呢？如果事先知道，那麼爲什麼其他信息首先發送給工作人員？ – doldt

如何使用['debounce']（http://stackoverflow.com/q/24004791/1233508）？它將處理延遲一段時間，並且如果在該延遲期間接收到新消息，則丟棄第一個消息並將新消息延遲一點，重複該消息直到消息停止。 – DCoder

@doldt所有的消息都會被髮送，因爲每當一個滑塊值發生變化時，應該執行新的計算，但同時用戶可以隨時繼續使用或停止使用滑塊，所以我不知道哪一個是最後一個消息只發送那個。「工人怎麼知道哪一個是最後一條信息，我猜是我自己問題的一部分。 – des

這與WebWorker沒有太大的關係。這似乎是一個典型的反彈用例。這裏的問題是，一旦你的工作人員收到一條消息，它怎麼知道這是最後一個？它不能說明未來。它不知道用戶是否會在不久的將來再次進行UI交互。所以解決這類問題的方法就是反彈。這個想法是你不要馬上執行你的代碼，而是稍微等一下，比如說200ms。在這段時間內，如果有另一條消息，那麼它將等待另外200毫秒而不做任何事情。你可以實現你自己這樣的事情，也可以導入和使用現有的圖書館之一像underscore.js

編輯：下面是使用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返回的包裝功能，可以調用盡可能經常需要。但是它不會立即觸發內部封裝的函數。它安排它在200ms內執行（根據你的需要調整它）。在此期間，如果有另一個電話，先前預定的執行將被取消，並且此時將執行一次200ms的新執行。當時間到了，你的函數將以最新版本的參數執行。現在你可能想知道以前調用的參數會發生什麼？答案是它們僅僅被包裝函數拋棄。請注意，傳遞給onmessage的參數將首先傳遞給包裝器函數，它只保留最後一個傳遞給包裝函數。你可以使用我在這裏創建的fiddle進行操作。我想補充的另一個注意事項是，在將它傳遞給WebWorker之前，您也可以在主線程上執行此去抖邏輯。

編輯：如果您需要關於如何在WebWorker中導入第三方庫的指南。 https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Importing_scripts_and_libraries

來源

2015-07-11 17:30:15 initialxy

我決定使用去抖動。我知道如何在WebWorker中導入庫，但我仍然對如何實現該功能感到困惑。現在，在我的工作人員中，我有： onmessage = function（e）{ //（1 - 獲取從主線程發送的值） sliderValues = e.data.sliderValues; //（2 - 執行計算） getMeshInformation（）; //（3 - 發佈結果） postMessage（「三角形」：三角形 }）; }; 現在我只想要no.1被執行，然後等待（debounce）爲2 + 3，以防它接收到一個新的1號覆蓋前一個。 – des

如果你使用其中一個現有的實現，你真正需要做的就是用debounce包裝你的原始'onmessage'回調函數，這就是全部。然而，如果你想自己實現，你可以看看[underscore.js]（https://github.com/jashkenas/underscore/blob/master/underscore.js#L821）或[lodash]（https：/ /github.com/lodash/lodash/blob/master/lodash.js#L7655）的一些靈感源代碼。當然，你的實現不需要那麼花哨。我將在上面編輯我的答案以包含一個示例，因爲在評論中發佈代碼很難看。 – initialxy

謝謝你的時間，這是非常有幫助的。 – des

JavaScript Web Worker - 如何忽略除最後一個之外的所有消息？

回答

相關問題