Как сохранить анимацию gif во время интенсивных вычислений

У меня есть страница, которая делает некоторые интенсивные и длительные вычисления в Javascript. Я хотел бы иметь анимацию загрузки, чтобы сообщить, что прогресс пользователя выполняется. Теперь у меня есть анимированный gif, но все окно браузера зависает (и gif не играет), пока работает Javascript. Затем, когда это будет сделано, он размораживается. Расчеты должны быть на стороне клиента, чтобы они не могли быть выполнены на сервере.

Есть ли способ защитить Javascript от замораживания страницы и прекращения воспроизведения анимаций при выполнении вычислений?

ОТВЕТЫ

Ответ 1

Вы также можете использовать HTML5 webworkers (Wikipedia) для запуска длинных сценариев в фоновом режиме. Это похоже на многопоточность для javascript.

Он будет работать в последних браузерах, кроме IE.

Найдена игра с веб-мастерами проверить

Ответ 2

Вы можете разделить работу небольшими кусочками и использовать setTimeout, чтобы начать следующую итерацию, как только первая завершится, таким образом браузер сможет обновить пользовательский интерфейс. (это потому, что браузер использует один единственный поток, поэтому, если он занят js, он не может делать другие вещи)

Ответ 3

Обработка Javascript является однопоточной, поэтому, пока ваш код запущен, никакой другой код анимации не будет запущен.

Вам нужно будет настроить обработку, чтобы она выполнялась партиями. Я не знаю, что вы обрабатываете, но если вы делаете то, что можно легко разделить, вы можете обработать первые N элементов, а затем использовать setTimeout для планирования следующего фрагмента, который будет выполняться за несколько миллисекунд. Таким образом, вы даете браузеру время делать другие вещи, которые необходимо выполнить.

Ответ 4

Если браузер зависает, значит, вы делаете серьезную работу.

Единственный способ решить эту проблему - добавить 100 мс сна каждую секунду выполнения script. Посмотрите на вызов javascript setInterval().

Ответ 5

Анимации CSS3 обычно продолжают работать, даже если блокировка JavaScript (проверена с помощью Chrome 40.0).

Таким образом, вы можете использовать библиотеки, такие как SpinKit или spin.js, чтобы увидеть, что расчет продолжается.

Однако обратите внимание на доступность анимации CSS3:
caniuse.com
Распространение мифов анимации Android CSS

Ответ 6

Вероятно, вам это больше не нужно, но на всякий случай, если кто-то другой отправляется в него, вот еще одно простое решение:

* обратите внимание, что это будет работать, только если это огромное выполнение script вызвано длинным циклом итерации

- сделайте свою петлю примерно такой:

function AsyncLoop(i, lastLoop, parameters) {
        setTimeout(function () {
            if (i < lastLoop) {
                //whatever you wanna do here
                window.console.log('iteration ' + i + ': ' + parameters[i].whatevs);

                i++;
                AsyncLoop(i, lastLoop, parameters);
            }
        }, 0);
    }

- затем назовите его так:

AsyncLoop(0, incredblyLongObjectArray.length, incredblyLongObjectArray);

Вот небольшая скрипка без использования параметров (так проще ее понять) и с помощью функции, чтобы определить, завершил ли желаемый script выполнение:

https://jsfiddle.net/or1mrmer/

Ответ 7

Я ответил на это с помощью действующего примера (с простым индикатором прогресса) здесь.

Он использует "доходность" и чрезвычайно прост в использовании (и модифицирует существующие JS-циклы), когда вы просто хотите разрешить другим процессам тайм-лис, и его проще настроить, чем веб-работников (что я также использовал), особенно если у вас уже есть цикл, взаимодействующий с глобальными переменными.