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

@iammax97 · Регистрация: 17.10.2025

Студворк — интернет-сервис помощи студентам

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

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

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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;
  }
 
  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();
 
  if(globalDivShowSpinner != null && typeof globalDivShowSpinner != "undefined") {
    globalDivShowSpinner.style.display='none';
    console.log('*** HERE WE GO ***');
  }
});

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

CSS:

CSS
1
2
3
4
5
6
.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:

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

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

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

@voraa · 17.10.2025, 19:06

Сообщение от iammax97

В чем здесь проблема?

Проблема в работе цикла событий js.
Когда происходит какое то событие, оно ставится в очередь.
Цикл событий берет очередное событие, и если для него есть обработчики, запускает их.
После отработки всех обработчиков события, происходит перерасчет стилей элементов и рендеринг экрана.
Затем берется следующее событие.

Так это работает, если без лишних подробностей.

Обратите внимание на После отработки всех обработчиков.
Когда вы установили globalDivShowSpinner.style.display='bloc k'; ровным счетом ничего не произошло в элементе изменился атрибут, а функция обработчик продолжает выполняться дальше. Перерасчет стилей и рендеринг экрана произойдут после того, как функция отработает.
А там еще снова устанавливается globalDivShowSpinner.style.display='none ';

(Если выполнять это с включенными devtools и точками останова, то перерасчет стилей и рендеринг будут выполняться и в точках останова)

Добавлено через 5 минут
Зачем вы поставили функции - обработчику async - не понятно.
Можно попробовать решить эту проблему так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
const globalDivShowSpinner = document.getElementsByClassName("show_spinner")[0];
 
// очищаем HTML при вставке текста
document.addEventListener('paste', 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;
  }
 
  if (globalDivShowSpinner != null && typeof globalDivShowSpinner != "undefined") {
    globalDivShowSpinner.style.display = 'block';
    console.log('globalDivShowSpinner.style.display => ' + globalDivShowSpinner.style.display);
  }
  setTimeout(() => {
    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();
 
    if (globalDivShowSpinner != null && typeof globalDivShowSpinner != "undefined") {
      globalDivShowSpinner.style.display = 'none';
      console.log('*** HERE WE GO ***');
    }
  }, 0);
});

Т.е поместить всю обработку вставки таблицы и гашение спинера в функцию, которая будет запускаться в другом событии - от таймера. А в этом событии только показываем спинер и завершаемся, что бы спинер отобразился. И запускаем таймер на 4 мс, потом начнется вся основная работа.

@iammax97 · 17.10.2025, 21:12 **[ТС]**

Большое спасибо! Решение работает, задача решена!

@voraa · 17.10.2025, 21:46

Если ваше изменение таблицы такое длительное (> 5 сек скажем), то все равно на это время все блокируется скриптом. У пользователя даже мышь двигаться не будет. Надо разбить этот цикл на кванты, а между ними давать возможность обрабатывать события.
Пусть квант - 10 мс.
Можно использовать scheduler.yield. Эта функция есть в Хроме, новом Файрфоксе. Для браузеров, где ее нет можно использовать setTimeout.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
const globalDivShowSpinner = document.getElementsByClassName("show_spinner")[0];
 
function yieldToMain() {
  // Используем scheduler.yield, если есть
  if ('scheduler' in window && 'yield' in scheduler) {
    return scheduler.yield();
  }
 
  // Если нет -  setTimeout:
  return new Promise(resolve => {
    setTimeout(resolve, 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;
  }
 
  if (globalDivShowSpinner != null && typeof globalDivShowSpinner != "undefined") {
    globalDivShowSpinner.style.display = 'block';
    console.log('globalDivShowSpinner.style.display => ' + globalDivShowSpinner.style.display);
  }
  await yieldToMain();
  let tbeg = performance.now();
  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]);
 
    const tend = performance.now();
 
    if (tend > tbeg + 10) {  // истек квант времени. прерываемся, что бы обрабатывались события.
      await yieldToMain();
      tbeg = performance.now();
    }
  }
  updateTotal();
 
  if (globalDivShowSpinner != null && typeof globalDivShowSpinner != "undefined") {
    globalDivShowSpinner.style.display = 'none';
    console.log('*** HERE WE GO ***');
  }
 
});

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

@iammax97 0 / 0 / 0 Регистрация: 17.10.2025 Сообщений: 2
	17.10.2025, 21:12 [ТС]
	Большое спасибо! Решение работает, задача решена! 0