javascript - 非阻塞 Javascript 和并发

Question

我有一个 web-worker 的代码，因为我不能用方法(函数)向它发布一个对象，我不知道如何停止用这段代码阻塞 UI:

        if (data != 'null') {
            obj['backupData'] = obj.tbl.data().toArray();
            obj['backupAllData'] = data[0];
        }
        obj.tbl.clear();
        obj.tbl.rows.add(obj['backupAllData']);
        var ext = config.extension.substring(1);
        $.fn.dataTable.ext.buttons[ext + 'Html5'].action(e, dt, button, config);
        obj.tbl.clear();
        obj.tbl.rows.add(obj['backupData'])

此代码从 html 表中导出记录。数据是一个数组，由 web worker 返回，有时可以有 50k 或更多的对象。由于 obj 及其包含的所有方法都不能传递给 we-worker，当数据长度为 30k、40k 或 50k 甚至更多时，UI 会阻塞。这是最好的方法吗？提前致谢。

Answer 1

您可以尝试将繁重的工作包装在异步函数中，例如超时，以允许引擎对整个逻辑进行排队，并在有时间时尽快对其进行细化

setTimeout(function(){
  if (data != 'null') {
        obj['backupData'] = obj.tbl.data().toArray();
        obj['backupAllData'] = data[0];
    }
  //heavy stuff
}, 0)

或者，如果代码非常长，您可以尝试找出一种策略，将您的代码拆分为操作 block ，并在单独的异步函数中执行每个 block (超时)

Best way to iterate over an array without blocking the UI