Когда выполняется долгая функция страница зависает. Как выполнить фоном ?

Question

Когда выполняется долгая функция страница зависает. Как выполнить фоном ?

Ксения Данченко Мастер (2239), закрыт 6 лет назад

Есть такой код
function update() { //long function
var inputs = getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
replace(inputs[i]);
}
}
function replace(var) {
//logic
}
Проблема в том что пока выполняется эта функция страница не отвечает. Клиент не может выделить текст на странице, нажать другие кнопки, подсветить сслылки и прочее. Можно максимум двигать страницу вверх вниз (колесиком). Можно ли как-то сделать, чтобы это все выполнялось в фоновом режиме типа, и не блочило страницу ?

Дополнен 6 лет назад

Answer 1

<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Таблица</title>
<style>
table, td {
width: 300px;
border: 1px solid darkgray;
border-collapse: collapse;
}
td {
text-align: right;
height: 18px;
}
</style>
</head>
<body>
<table>
<caption>Редактируемая таблица</caption>
<tr>
<td contenteditable="true">1</td>
<td contenteditable="true">2</td>
<td contenteditable="true">3</td>
</tr>
<tr>
<td contenteditable="true">1</td>
<td contenteditable="true">2</td>
<td contenteditable="true">3</td>
</tr>
</table>
</body>
</html>

Answer 2

гугли многопоточность. Нагуглил - её нету в js. Тогда асинхронные фу-ии.

Answer 3

Надо разобраться, почему так долго выполняется. Наверняка можно оптимизировать. Сколько input-ов? 1000?
Настоящей многопоточности в JS нет, есть её имитация. Да, можно применить. Это улучшит отзывчивость страницы, но не знаю, решит ли проблему полностью.

Answer 4

режь на куски, подгружай с задержкой

Answer 5

есть нестандартный способ увеличить скорость обработки
сначала скрыть все input ы style=' display:none;'
после полной обработки всего массива обьектов
установи или удали им css стиль display:none

установить аттрибут style
obj.setAttribute( 'style' , 'display:none; ' )

попробуй этот вариант
/* оптимизировано */
function update(){
var i, sz = inputs.length;
var obj;

for ( i=0; i < sz; i++ ){
obj = inputs[ i ];
obj.setAttribute( 'style', 'display:none;' );
replace( obj );
}
return 0;
}

Answer 6

А можно ссылку на страницу, побаловаться с консолью?