Блог

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

изменение DOM во время выполнения тяжелой функции

#javascript #asynchronous #dom #ecmascript-6

#javascript #асинхронный #dom #ecmascript-6

Вопрос:

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

Мой код в основном выглядит так:

 image.onload = function onLoad() {
  document.getElementById("loading-spinner").style.display = "block";
  run_heavy_function(this);
};

Счетчик загрузки отображается только после завершения функции. Это не то, чего я хочу.

Я сталкивался с некоторыми решениями, использующими setTimeout и прочее. Но мне это не кажется хорошей идеей. Каков правильный подход к изменению DOM в фоновом процессе в ES6 с использованием чистого javascript?

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

1. Решение состоит в том, чтобы не блокировать основной поток. Возможно, вы захотите использовать web workers для тяжелых задач, если вы можете их использовать (благодаря поддержке). developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API /…

Ответ №1:

Простой способ решить эту проблему — объединение событий:

 const loaderStart = new Event('loaderStart');
const loaderEnd = new Event('loaderEnd');
const spinner = document.getElementById("loading-spinner");

image.onload = function onLoad() {
  spinner.dispatchEvent(loaderStart);
  run_heavy_function(this);
  spinner.dispatchEvent(loaderEnd);
};

spinner.addEventListener('loaderStart', function(){
   this.style.display = "block";
});

spinner.addEventListener('loaderEnd', function(){
   this.style.display = "none";
});