Укажите, что запущена функция JS с большой нагрузкой на процессор (спиннеры GIF не анимируются)

Отображение, а затем скрытие анимированных GIF-индикаторов / счетчиков — это хороший способ показать пользователю, что его действие сработало и что что-то происходит, пока он ожидает завершения своего действия — например, если действие требует загрузки некоторых данных с сервера (серверов). ) через AJAX.

Моя проблема заключается в том, если причиной замедления является процессоринтенсивная функция, gif зависает.

В большинстве браузеров GIF прекращает анимацию, пока выполняется ресурсоемкая функция. Для пользователя это выглядит так, будто что-то сломалось или дало сбой, хотя на самом деле оно работает.

пример JSBIN

Примечание: кнопка «Это медленно» на какое-то время свяжет процессор — у меня около 10 секунд, зависит от характеристик ПК. Вы можете изменить степень этого с помощью атрибута data-reps в HTML.

• Ожидание: при нажатии запускается анимация. Когда процесс завершится, текст изменится (обычно мы бы тоже скрыли индикатор, но пример будет понятнее, если мы оставим его вращающимся).
• Фактический результат: анимация запускается, затем останавливается до завершения процесса. Это создает впечатление, что что-то сломано (пока вдруг неожиданно не завершится).

Есть ли способ указать, что запущенный процесс не зависает, если JS загружает процессор? Если нет возможности анимировать что-то, я прибегаю к отображению, а затем скрытию статического текстовое сообщение с надписью Loading... или что-то подобное, но что-то анимированное выглядит гораздо активнее.

Если кто-то задается вопросом, почему я использую код, интенсивно использующий процессор, а не просто избегаю проблемы путем оптимизации: это очень сложный рендеринг. Код довольно эффективен, но то, что он делает, сложно, поэтому он всегда будет требователен к процессору. Это занимает всего несколько секунд, но этого достаточно, чтобы разочаровать пользователя, и of-activity-indicators-progress-b">давным-давно было проведено множество исследований, доказывающих, что индикаторы хороши для UX.

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

• пример JSBIN.
• Одно простое исправление, которое я нашел здесь (используемое в другом примере выше), состоит в том, чтобы обернуть все после отображения индикатора в setTimeout( function(){ ... },50); с очень коротким интервалом, чтобы сделать его асинхронным. Это работает (см. первый пример выше), но это не очень чисто - я уверен, что есть лучший подход.

Я уверен, что должен быть какой-то стандартный подход к индикаторам для загрузки процессора, о котором я не знаю, или, может быть, это нормально просто использовать Loading... текст с setTimeout? Мои поиски ничего не дали. Я прочитал 6 или 7 вопросов о похожих проблемах, но все они оказались несвязанными.

Изменить Несколько замечательных предложений в комментариях, вот еще несколько подробностей моей конкретной проблемы:

• Сложный процесс включает в себя обработку больших файлов данных JSON (например, операции манипулирования данными JS в памяти после загрузки файлов) и визуализацию SVG (через Raphael.js), включая сложную, подробную масштабируемую карту мира. , по результатам обработки данных из JSON. Итак, некоторые из них требуют манипулирования DOM, некоторые — нет.
• К сожалению, мне нужно поддерживать IE8, НО если необходимо, я могу предоставить пользователям IE8/IE9 минимальный запасной вариант, например текст Loading..., а всем остальным дать что-то современное.