繁重的 JavaScript 计算块

Question

我（在 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 类似问题上看到很多时间的解决方案 => 没有也工作.

我运行在基本的 Java 脚本环境中，我使用的唯一库是 jQuery.

所以，这是一种强制此计算在其他线程（或类似线程）或更全局的线程中工作的方法，不要阻塞 UI 线程?

Answer 1

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

繁重的 JavaScript 计算块

Heavy JavaScript computations block

javascript

multithreading

client-side

ui-thread

heavy-computation