繁重的 JavaScript 计算块答案

【问题标题】：Heavy JavaScript computations block繁重的 JavaScript 计算块
【发布时间】：2016-05-03 15:59:36
【问题描述】：

我（在 JavaScript/jQuery 中）进行大量计算。问题是这些计算阻塞了 UI 线程，我（尝试过并且）找不到避免这种情况的方法。

一些要求：

我无法使用 webWorkers
计算必须在客户端（我无法在服务器端进行 AJAX 调用）

我是一名 Android 程序员，所以我知道如何在 Java 中做到这一点（启动线程、进行计算、将数据发送到 UI 线程），所以我在这里尝试做同样的事情。

因此，这些繁重的计算只能有一个活动实例（我将制作一个 GIF 以告知用户他不能在此之前再次启动它）所以不需要管理多个调用（最后结束，开始新的） .

代码如下：

var datas = []; // 10000 datas here
function sortBy(param, paramType, order) {
    var newArray = JSON.parse(JSON.stringify(datas));

    window.setTimeout(function(){
        var end = false;
        for (var i = newArray.length - 1; i > 0 && !end; i--) {
            end = true;
            for (var j = 0; j < i - 1; j++) {
                var sort = false;

                if (paramType.localeCompare("str") == 0) {
                    if (newArray[j + 1][param].localeCompare(newArray[j][param]) < 0 && order.localeCompare("up") == 0) {
                        sort = true;
                    } else if (newArray[j + 1][param] > newArray[j][param] && order.localeCompare("down") == 0) {
                        sort = true;
                    }
                } else if (paramType.localeCompare("nbr") == 0) {
                    if ((newArray[j + 1][param] - newArray[j][param]) < 0 && order.localeCompare("up") == 0) {
                        sort = true;
                    } else if ((newArray[j + 1][param] - newArray[j][param]) > 0 && order.localeCompare("down") == 0) {
                        sort = true;
                    }
                }

                if (sort) {
                    var tmp = newArray[j + 1];
                    newArray[j + 1] = newArray[j];
                    newArray[j] = tmp;
                    end = false;
                }
            }
        }

        datas = newArray;
    }, 0);
}

我正在对数据进行排序（为了避免从服务器重新加载移动设备的数据，这就是为什么我不能在服务器端进行此操作）。

我试图在函数中复制（完整复制，无引用）数组，因为我认为包含数据的初始变量，因为她不在函数中，在 UI 线程上，并且正在访问它进入函数调用UI线程。 => 不起作用。（所以我错了）。

如您所见，我尝试在 setTimout( {computations}, 0) 中启动计算，这是我在其他 Stack Overflow 类似问题上看到很多时间的解决方案 => 也不起作用 .

我在基本的 JavaScript 环境中运行，我使用的唯一库是 jQuery。

那么，这里有没有一种方法可以强制此计算在其他线程（或类似的线程）中工作，或者更全局，不要阻塞 UI 线程？

【问题讨论】：

看看here，这里的建议是将后台工作分成块，中间有中断以更新 UI。
你为什么不能使用 Web Workers，确切地说？
@AkshatMahajan，因为不兼容所有设备/浏览器。

标签： javascript multithreading client-side ui-thread heavy-computation

【解决方案1】：

Javascript 是单线程的。除非您使用 wb worker，否则您唯一的选择是将计算分成几部分。执行一段计算，然后使用setImmediate 或setTimeout 安排下一段运行。这将使 UI 有时间执行并防止您发现的阻塞。

【讨论】：