我想使用Web Workers对数组进行排序。但是，当工作程序仍在执行排序功能时，此数组可能会随着时间的推移接收新值。
所以，我的问题是，在收到新项目后，如何在工作程序上“停止”排序计算，以便它可以对该项目进行数组排序，同时仍保留已进行的排序？
示例：
let worker = new Worker('worker.js');
let list = [10,1,5,2,14,3];
worker.postMessage({ list });
setInterval(() => worker.postMessage({ num: SOME_RANDOM_NUM, list }), 100);
worker.onmessage = event => {
list = event.data.list;
}
所以可以说，我已经超过50岁，工人在此之前的分类工作取得了一些进展，现在我有了类似的东西：[1, 2, 3, 10, 5, 14, 50]。这意味着排序在索引3处停止。因此，我将此new数组传递回了工作程序，因此它可以继续从位置3进行排序。
由于没有办法暂停/恢复网络工作者，我该怎么做？
尽管Worker在您主页上的另一个线程之外工作，并且因此可以连续运行而不会阻塞UI，但它仍在单个线程上运行。
这意味着在您的排序算法完成之前，Worker将延迟消息事件处理程序的执行；它与主线程一样受阻。
即使您从该工作人员内部使用其他工作人员，问题也将是相同的。
唯一的解决方案是使用一种generator function作为排序器，并不时产生它，以便事件可以执行。
但是这样做会大大降低您的排序算法。
为了更好，您可以尝试挂接到每个事件循环，这要归功于MessageChannel对象：您在一个端口中交谈，并在下一个事件循环中接收消息。如果您再次与另一个端口通信，则您对每个事件循环都有自己的钩子。
现在，最好的方法是在每个事件循环中都运行一个好的批处理，但是对于演示，我将仅调用生成器函数的一个实例（我是从this Q/A借来的）
const worker = new Worker(getWorkerURL());
worker.onmessage = draw;
onclick = e => worker.postMessage(0x0000FF/0xFFFFFF); // add a red pixel
// every frame we request the current state from Worker
function requestFrame() {
worker.postMessage('gimme a frame');
requestAnimationFrame(requestFrame);
}
requestFrame();
// drawing part
const ctx = canvas.getContext('2d');
const img = ctx.createImageData(50, 50);
const data = new Uint32Array(img.data.buffer);
ctx.imageSmoothingEnabled = false;
function draw(evt) {
// converts 0&1 to black and white pixels
const list = evt.data;
list.forEach((bool, i) =>
data[i] = (bool * 0xFFFFFF) + 0xFF000000
);
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.putImageData(img,0,0);
// draw bigger
ctx.scale(5,5);
ctx.drawImage(canvas, 0,0);
}
function getWorkerURL() {
const script = document.querySelector('[type="worker-script"]');
const blob = new Blob([script.textContent]);
return URL.createObjectURL(blob);
}body{
background: ivory;
}<script type="worker-script">
// our list
const list = Array.from({length: 2500}).map(_=>+(Math.random()>.5));
// our sorter generator
let sorter = bubbleSort(list);
let done = false;
/* inner messaging channel */
const msg_channel = new MessageChannel();
// Hook to every Event loop
msg_channel.port2.onmessage = e => {
// procede next step in sorting algo
// could be a few thousands in a loop
const state = sorter.next();
// while running
if(!state.done) {
msg_channel.port1.postMessage('');
done = false;
}
else {
done = true;
}
}
msg_channel.port1.postMessage("");
/* outer messaging channel (from main) */
self.onmessage = e => {
if(e.data === "gimme a frame") {
self.postMessage(list);
}
else {
list.push(e.data);
if(done) { // restart the sorter
sorter = bubbleSort(list);
msg_channel.port1.postMessage('');
}
}
};
function* bubbleSort(a) { // * is magic
var swapped;
do {
swapped = false;
for (var i = 0; i < a.length - 1; i++) {
if (a[i] > a[i + 1]) {
var temp = a[i];
a[i] = a[i + 1];
a[i + 1] = temp;
swapped = true;
yield swapped; // pause here
}
}
} while (swapped);
}
</script>
<pre> click to add red pixels</pre>
<canvas id="canvas" width="250" height="250"></canvas>您可以通过一些技巧–在setTimeout函数中断的帮助下进行操作。例如，没有附加线程就不可能并行执行2个函数，但是使用setTimeout函数中断技巧，我们可以像下面这样进行操作：
并行执行功能的示例
var count_0 = 0,
count_1 = 0;
function func_0()
{
if(count_0 < 3)
setTimeout(func_0, 0);//the same: setTimeout(func_0);
console.log('count_0 = '+count_0);
count_0++
}
function func_1()
{
if(count_1 < 3)
setTimeout(func_1, 0);
console.log('count_1 = '+count_1)
count_1++
}
func_0();
func_1();您将获得此输出：
count_0 = 0count_1 = 0count_0 = 1count_1 = 1count_0 = 2count_1 = 2count_0 = 3count_1 = 3
为什么有可能？因为setTimeout功能需要一些时间才能执行。这一次足以执行下面的代码中的某些部分。
为您提供解决方案
在这种情况下，您必须编写自己的数组排序函数（或者您也可以使用我的以下函数），因为我们无法中断本机的sort函数。在此您自己的函数中，您必须使用此setTimeout函数中断技巧。并且您可以收到您的message事件通知。
在以下示例中，我在数组的一半长度处插入了中断，可以根据需要更改它。
带有自定义排序功能中断的示例
var numbers = [4, 2, 1, 3, 5];
// this is my bubble sort function with interruption
/**
* Sorting an array. You will get the same, but sorted array.
* @param {array[]} arr – array to sort
* @param {number} dir – if dir = -1 you will get an array like [5,4,3,2,1]
* and if dir = 1 in opposite direction like [1,2,3,4,5]
* @param {number} passCount – it is used only for setTimeout interrupting trick.
*/
function sortNumbersWithInterruption(arr, dir, passCount)
{
var passes = passCount || arr.length,
halfOfArrayLength = (arr.length / 2) | 0; // for ex. 2.5 | 0 = 2
// Why we need while loop: some values are on
// the end of array and we have to change their
// positions until they move to the first place of array.
while(passes--)
{
if(!passCount && passes == halfOfArrayLength)
{
// if you want you can also not write the following line for full break of sorting
setTimeout(function(){sortNumbersWithInterruption(arr, dir, passes)}, 0);
/*
You can do here all what you want. Place 1
*/
break
}
for(var i = 0; i < arr.length - 1; i++)
{
var a = arr[i],
b = arr[i+1];
if((a - b) * dir > 0)
{
arr[i] = b;
arr[i+1] = a;
}
}
console.log('array is: ' + arr.join());
}
if(passCount)
console.log('END sring is: ' + arr.join());
}
sortNumbersWithInterruption(numbers, -1); //without passCount parameter
/*
You can do here all what you want. Place 2
*/
console.log('The execution is here now!');您将获得此输出：
数组是：4,2,3,5,1数组是：4,3,5,2,1现在就在这里执行！数组是：4,5,3,2,1数组是：5,4,3,2,1END评分为：5,4,3,2,1
您可以使用插入排序（种类）来进行。这是想法：
以内部空数组开始您的工作程序（显然，空数组已排序）
您的工作人员只接收元素，而不接收整个数组
您的工作人员将接收到的所有元素正确插入数组中
每隔n秒，如果上一个事件之后它已更改，则工作程序将使用当前数组引发一条消息。 （如果愿意，可以在每次插入时发送数组，但是以某种方式缓冲起来效率更高）
最终，您将获得整个数组，如果添加了任何项目，您将收到更新后的数组。
注意：由于数组总是排序的，因此可以使用二进制搜索将其插入正确的位置。这非常有效。
有两个不错的选择。
Worker.terminate()首先是杀死您现有的网络工作者并开始一个新的。为此，您可以使用Worker.terminate()。
Worker.terminate()接口的terminate()方法立即终止Worker。这不会为工人提供完成作业的机会；它只是立即停止。
此方法的唯一缺点是：
就我而言，我有很多州。我的工作人员正在渲染图像的一部分，当用户平移到其他区域时，我希望它停止正在执行的操作并开始渲染新区域。但是渲染图像所需的数据非常庞大。
在您的情况下，您具有不想使用的（可能很大）列表的状态。
选项2：屈服
Worker
但是，此操作无效，因为let requestId = 0; onmessage = event => { ++requestId; sortAndSendData(requestId, event.data); } function sortAndSendData(thisRequestId, data) { let isSorted = false; let total = 0; while (data !== 0) { // Do a little bit of computation. total += data; --data; // Check if we are still the current request ID. if (thisRequestId !== requestId) { // Data was changed. Cancel this sort. return; } } postMessage(total); }运行完毕并阻止了Web Worker的事件循环。我们需要某种方法在sortAndSendData()之前产生。不幸的是，Javascript并没有thisRequestId !== requestId方法。它确实有yield/async，所以我们可以尝试一下：
await
很遗憾，它不起作用。我认为这是因为let requestId = 0; onmessage = event => { console.log("Got event", event); ++requestId; sortAndSendData(requestId, event.data); } async function sortAndSendData(thisRequestId, data) { let isSorted = false; let total = 0; while (data !== 0) { // Do a little bit of computation. total += data; --data; await Promise.resolve(); // Check if we are still the current request ID. if (thisRequestId !== requestId) { console.log("Cancelled!"); // Data was changed. Cancel this sort. return; } } postMessage(total); }/async急切地使用“微任务”执行事情，如果可能的话，它们会在未决的“宏任务”（我们的网络工作者消息）之前执行。我们需要强制将
await变成宏任务，您可以使用await：
setTimeout(0)
这有效！但是，它非常慢。在装有Chrome的计算机上，let requestId = 0; onmessage = event => { console.log("Got event", event); ++requestId; sortAndSendData(requestId, event.data); } function yieldToMacrotasks() { return new Promise((resolve) => setTimeout(resolve)); } async function sortAndSendData(thisRequestId, data) { let isSorted = false; let total = 0; while (data !== 0) { // Do a little bit of computation. total += data; --data; await yieldToMacrotasks(); // Check if we are still the current request ID. if (thisRequestId !== requestId) { console.log("Cancelled!"); // Data was changed. Cancel this sort. return; } } postMessage(total); }大约需要4毫秒！这是因为浏览器在await yieldToMacrotasks()上设置的最小超时时间大约为1或4 ms（实际的最小时间似乎很复杂）。幸运的是，另一个用户将我指向
setTimeout(0)。基本上在另一个a quicker way上发送消息也会产生事件循环，但不会像MessageChannel那样受到最小延迟的影响。该代码有效，每个循环仅需约0.04毫秒，应该没问题。
setTimeout(0)
我对此并不完全满意-它依赖于以FIFO顺序处理的let currentTask = {
cancelled: false,
}
onmessage = event => {
currentTask.cancelled = true;
currentTask = {
cancelled: false,
};
performComputation(currentTask, event.data);
}
async function performComputation(task, data) {
let total = 0;
let promiseResolver;
const channel = new MessageChannel();
channel.port2.onmessage = event => {
promiseResolver();
};
while (data !== 0) {
// Do a little bit of computation.
total += data;
--data;
// Yield to the event loop.
const promise = new Promise(resolve => {
promiseResolver = resolve;
});
channel.port1.postMessage(null);
await promise;
// Check if this task has been superceded by another one.
if (task.cancelled) {
return;
}
}
// Return the result.
postMessage(total);
}
事件，我怀疑是否可以保证。我怀疑您可以重写代码以使其正常工作，即使事实并非如此。