Обработчик paste блокирует изменение DOM
 

Уважаемый коллективный разум!

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

Пытаюсь это делать с помощью такого кода:

const globalDivShowSpinner = document.getElementsByClassName("show_spinner")[0];

// очищаем HTML при вставке текста
document.addEventListener('paste', async function(e) {
  var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
  e.preventDefault();

  let lines = bufferText.split(/\r?\n/).filter(Boolean);
  if(!lines.length) {
    console.log('Нечего вставлять');
    return;
  }

  // cells = createTableFromLines(lines);
  if(globalDivShowSpinner != null && typeof globalDivShowSpinner != "undefined") {
    globalDivShowSpinner.style.display='block';
    console.log('globalDivShowSpinner.style.display => '+globalDivShowSpinner.style.display);     
  }

  let delta_idx = 0; // смещение чтения данных в случае, если первая колонка содержит номер позиции

  for(let i = 0; i < lines.length; i++) {
    let current_line = lines[i];
    let cells = current_line.split(/\t/);
    cells = cells.filter(function(str) { return /\S/.test(str); }); // убираем пустые строки

    let delta_idx = 0; // смещение чтения данных в случае, если первая колонка содержит номер позиции

    // проверяем, является ли первая колонка порядковым номером
    if(cells[0].match(/^[0-9\.]+$/) !== null) {
      delta_idx = 1;
    }
    // если в строке только 1 колонка, это - название раздела
    if(cells.length == 1+delta_idx) {
      addNewChapter(cells[delta_idx]);
      continue;
    }
    // Пустое наименование позиции => пропускаем
    if(!cells[delta_idx].length) {
      continue;
    }
    // заменяем ',' на '.' в числовых полях:
    if(cells.length > delta_idx+2 && typeof cells[delta_idx+2] !== "undefined" && !isNaN(parseFloat(cells[delta_idx+2]))) {
      cells[delta_idx+2] = cells[delta_idx+2].replace(',','.');
    }
    if(cells.length > delta_idx+3 && typeof cells[delta_idx+3] !== "undefined" && !isNaN(parseFloat(cells[delta_idx+3]))) {
      cells[delta_idx+3] = cells[delta_idx+3].replace(',','.');
    }
    addNewCustom(1,0,cells[delta_idx],cells[delta_idx+1],cells[delta_idx+2],cells[delta_idx+3]);
  }
  updateTotal();

  //document.body.removeChild(spinner);
  if(globalDivShowSpinner != null && typeof globalDivShowSpinner != "undefined") {
    globalDivShowSpinner.style.display='none';
    console.log('*** HERE WE GO ***');
  }
});

Спинер реализован следующим образом.

CSS:

.show_spinner {
			position:fixed;top:0;right:0;bottom:0;left:0;
			background: rgba(0,0,0,0.5) url(/images/spinners/Gear.gif) no-repeat 50% 50%;
			z-index:100;
			background-size: 10ex;
		}

HTML:

<div class="show_spinner" style="display:none"></div>

В итоге, на консоль выводится 'globalDivShowSpinner.style.display => block' (отладочная печать непосредственно перед отображением спинера), но сам спинер не показывается. Если вручную поменять в HTML style="display:block", спинер конечно показывается.

В чем здесь проблема? Я джун в JS и уже сломал весь мозг, прошу помочь разобраться.

Если коротко... Пока работает скрипт, браузер ничего рисовать не будет.
А когда у тебя закончится скрипт - спинер будет выключен.

Т.ч. включил спинер... Запускай все остальное через setTimeout()... И уже там выключай спинер.

async зачем? :blink:

Коренное заблуждение. :)
Джуниор разработчик знает ЯП и его основы.
Т.ч. ты пока просто новичок в JS.

Сколько уже успел прочитать учебников по JS?

Спасибо! Через setTimeout() все отработало как надо!

Согласен: скорее не джун, а нуб :help:

Читаю вот этот учебник, порекомендовали старшие товарищи

Не знаю, что там в разных учебниках написано, но async функцию делают в двух случаях.
- Если в самой функции надо ждать оператором await окончания других асинхронных функций.
- Или функция должна вернуть промис. Хотя, в этом случае, промис можно вернуть и обычной функцией.

Для начала - пойдет. :yes: