Javascript，如何编写Array.sort方法以便通过超时策略调用它？

Question

我的 sort() 函数遇到瓶颈，例如:

list.sort(function (a,b) {return (a.value - b.value);});

使浏览器卡住几秒钟。

对于循环的相同情况，建议使用“超时”策略，如下所述:

How to stop intense Javascript loop from freezing the browser

那么问题来了，这个可以用sort方法实现吗？

*在评论讨论后进行编辑

// main_div is a div defined before
for (let i=0; i<list.length; i++) {
    main_div.appendChild(document.getElementById(list[i].id));
}

Answer 1

您可以使用 native sort 方法执行排序，但在单独的线程中使用 Web Worker。网络工作人员将在完成其工作时发出通知。我已将其包装在 ES6 Promise 中，因此您可以使用 then 方法(请参阅下面的非 Promise 版本):

function asyncSort(data) {
    // Return a promise
    return new Promise(function (resolve) {
        // function to be called by web worker:
        function onmessage(e) {
            e.data.sort();
            postMessage(e.data);
        }
        // Create the worker, passing it the above code (as blob URL)
        var worker = new Worker(URL.createObjectURL(
            new Blob(['onmessage = ' + onmessage.toString()])));
        // Capture the event when worker has finished
        worker.onmessage = function (e) { 
            resolve(e.data); // resolve the promise
        };
        // Let worker execute the sort (async)
        worker.postMessage(data);
    });
}

// Sample call
asyncSort([2, 3, 1]).then(function (result) {
    console.log(result); // [1, 2, 3]
});

非 promise 版本如下所示:

function asyncSort(data, callback) {
    function onmessage(e) {
        e.data.sort();
        postMessage(e.data);
    }
    var worker = new Worker(URL.createObjectURL(
        new Blob(['onmessage = ' + onmessage.toString()])));
    worker.onmessage = function (e) { 
        callback(e.data);
    };
    worker.postMessage(data);
}

asyncSort([2, 3, 1], function (result) {
    console.log(result);
});

请注意，IE(至少版本 11)会在 Blob URL 上引发安全错误。作为解决方法，您必须创建一个单独的 JS 脚本文件，其中仅包含以下内容:

onmessage = function (e) {
    e.data.sort();
    postMessage(e.data);
}

...然后将该脚本引用为原始脚本中 Worker 的 URL:

new Worker('script.js')