Блок тяжелых JavaScript-вычислений

Question

Я делаю (в JavaScript/ JQuery) тяжелые вычисления. Проблема в том, что эти вычисления блокируют поток пользовательского интерфейса, и я (пытался и) не могу найти способ избежать этого.

Некоторые требования:

• Я не могу использовать webWorkers
• Вычисления должны быть на стороне клиента (я не могу сделать AJAX-вызов для выполнения их на стороне сервера)

Я программист на Android, поэтому я знаю, как это сделать в Java (запуск потока, выполнение вычислений, отправка данных в поток пользовательского интерфейса), и поэтому я пытаюсь сделать то же самое здесь.

Таким образом, эти тяжелые вычисления могут иметь только один активный экземпляр (я сделаю 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);
}

Я сортирую данные (и во избежание перезагрузки данных с сервера для мобильных телефонов, поэтому я не могу сделать это на стороне сервера).

Я попытался скопировать (полная копия, без ссылки) массив в функции, потому что я думал, что исходная переменная, которая содержит данные, потому что она не находится в функции, была в потоке пользовательского интерфейса, и доступ к ней в Функция делает вызов в потоке пользовательского интерфейса. => не работает. (и так я ошибаюсь).

Я пытался запустить вычисления в setTimout( {computations}, 0) как вы можете видеть, это было решением, которое я вижу много времени на других похожих вопросах Stack Overflow => тоже не работает.

Я работаю в базовой среде JavaScript, единственная библиотека, которую я использую, - это jQuery.

Итак, есть ли способ заставить эти вычисления работать в другом потоке (или что-то в этом роде) или более глобально, не блокировать поток пользовательского интерфейса?

Answer 1

Javascript является однопоточным. Если вы не используете wb работника, ваш единственный выбор - разделить вычисления на части. Выполните часть расчета, затем используйте setImmediate или же setTimeout запланировать следующий кусок для запуска. Это даст UI время для выполнения и предотвратит обнаруженную блокировку.