Блог

Главная - Вопросы по программированию - Загружаемое изображение на основе CSS заблокировано длительным циклом обновления пользовательского интерфейса

Загружаемое изображение на основе CSS заблокировано длительным циклом обновления пользовательского интерфейса

#javascript #css

#javascript #css

Вопрос:

В моем веб-приложении я показываю заставку загрузки при выполнении вызовов AJAX. Способ, которым я это делаю, заключается в:

  1. На странице есть loadingScreen div, который содержит изображение заставки.
  2. В CSS #loadingScreen имеет display:none , в то время как body.loading #loadingScreen имеет display:block .
  3. Перед вызовом AJAX я добавляю loading класс в body и в complete функции вызова AJAX удаляю loading класс.
  4. У меня есть 2 вспомогательные функции showLoading() и hideLoading() , которые добавляют / удаляют loading класс в / из body

Пока все хорошо.

У меня также есть некоторые операции, не связанные с AJAX, требующие большого объема пользовательского интерфейса, такие как updateAllTableRows() , которые считывают значение текстового элемента на странице и обновляют текстовые элементы в (всех) 1000 строках таблицы значением. Я также хочу использовать экран загрузки для этой функции.

Подход 1 (сбой): добавьте showLoading() и hideLoading() в верхнюю и нижнюю части updateAllTableRows().

 function updateAllTableRows(){
  showLoading();
  <code to update the table>
  hideLoading();
}

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

Подход 2 (сработал): сделайте обновление таблицы асинхронным, переопределив функцию

 function updateAllTableRows(){
  showLoading();
  
  function innerUpdateFunction(){
    <code to update the table>
    hideLoading();
  }
  
  setTimeout(innerUpdateFunction, 10)
}

Мои вопросы:

  1. Почему первый подход не работает? Читает ли браузер изменение класса ( loading ) и обновляет видимость #loadingScreen в отдельном потоке, который блокируется при выполнении updateAllTableRows() ?
  2. Подход 2 потребовал бы от меня переписать все другие функции, связанные с пользовательским интерфейсом (переопределить внутреннюю функцию перемещения кода в блок setTimeout) вместо простого добавления вызовов showLoading() и hideLoading() в начале и конце функций. Правильный ли это подход?

Комментарии:

1. Браузер автоматически не выполняет этап перерисовки страницы при ее изменении с помощью javascript. Ему нужно дать шанс сделать это. Пока ваш javascript непрерывно обрабатывает операции, браузеру не будет предоставлена возможность выполнять графическую работу. Где как, когда вы используете setTimeout, он ненадолго отказывается от управления, чтобы позволить браузеру выполнять любую другую работу, которая должна быть выполнена. Таким образом, вы видите, что появляется загрузочный элемент.

2. Вы не предоставили нам достаточного кода для устранения вашей проблемы.

3. Вы имеете в виду часть <код для обновления таблицы> ? Это всего лишь набор jquery для чтения и обновления значений в таблице. например $('#tableID .rowClass.editable .textInput').val(valueFromAnotherInput) . Я опустил это, потому что я не пытаюсь понять, почему этот фрагмент кода требует времени. Я пытался понять, почему этот фрагмент кода блокирует эффекты видимости showLoading() на #loadingScreen . Комментарий Таплара указывает мне в этом направлении.

4. @Taplar Есть ли какая-нибудь документация, которую я могу прочитать по этому поводу? А пока я собираюсь взглянуть на это: blog.usejournal.com /…