Делается клик по кнопке, и начинает выполняться скрипт. Скрипт выполняется достаточно долго.
В html-страницу вставлен тег "div class=loader", у него "display:none"
Вставляю в начало js-скрипта $('div.loader').show()
Но "лоадер" не показывается в браузере до полного выполнения js-скрипта.
При этом, если вставить alert() после $('div.loader').show(), то "лоадер" показывается сразу вместе с окном сообщения. Если кликнуть "ОК" в окне сообщения (alert), то "лоадер" показывается до полного выполнения js-скрипта, и закрывается (в конце поставлено $('div.loader').hide())
Как сделать так, чтобы "лоадер" показывался на время выполнения js-скрипта?
Выполнением JS-кода и работой с DOM занимается один и тот же поток. То есть, у браузера нет возможности обновить "лоадер" до того, как ваш скрипт будет выполнен.
Необходимо разделить отображение "лоадера" и скрипт. Например - обернуть скрипт в setTimeout. Или (что было бы уместнее, учитывая "достаточно долгое" выполнение) вынести его в web worker.
$('div.region').on("mousedown", function (e) { $('div.loader').show(); }).on('mouseup', function (e) { ... }
При нажатии мышки запускается "loader", а при отпускании запускается скрипт. Так как клик происходит быстро, то человеку незаметно, а машина уже успела обработать первую функцию и запустить вторую.
"web worker" - это, так понимаю, создать отдельный поток. Будут изучать, в параллельных вычислениях пока не так силён.
