Уважаемый коллективный разум!
Очень нужна помощь в решении такой задачи. Есть обработчик вставки табличных данных из буфера обмена в веб-таблицу, производящий некоторые расчеты. Это может занимать ощутимое время для больших таблицы, поэтому в начале надо показать спинер, а в конце - спрятать его.
Пытаюсь это делать с помощью такого кода:
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 и уже сломал весь мозг, прошу помочь разобраться.
