Блокирование интерфейса. Добавление нового элемента
Добрый день!
Суть проблемы: есть некий интерфейс, по нажатию определенной кнопки происходит добавление новых полей и полный ререндеринг всех элементов. Поскольку элементов на вкладке очень много, этот процесс занимает продолжительное время. Это не правильно и в ближайшее время будет переделано, но речь сейчас не об этом. Необходимо сделать блокировку интерфейса на время, пока происходит перестроение страницы: стандартный прозрачный блок поверх страницы с "Пожалуйста, подождите". Как я пробовал это реализовать: 1. jquery-плагин $.blockUi(); 2. Добавление блокируещего div'a на страницу и show() его, когда необходимо. 3. Создание div'a в скрипте и $("body").append() его, когда необходимо. Проблема в том, что блокировка, в любом случае, срабатывает после ререндеринга. То есть, по нажатию кнопки запускается функция, которая добавляет блокирующий div на страницу, а затем запускает добавление элементов и ререндеринг вкладки, а в результате по нажатию кнопки интерфейс зависает (ререндеринг), потом появляются новые элементы, а потом срабатывает уже никому не нужная блокировка. Может кто-нибудь подсказать, с чем это связано и как его бороть? |
То есть как, в коде сначала блокировка, а потом рендеринг, а срабатывает все наоборот?
|
Именно.
В коде: var that = this; $('#attributes-tab').on('click', '#' + buttonId, function (event) { that.testPreloader(event); }); ... testPreloader: function (event) { var preloader = this.createPreloader(); // в createPreloader создаем нужный div $("body").append(preloader); // либо запуск $('#preloader').show(); если элемент preloader уже на странице this.cloneAttributeGroup(event); // толстая функция с ререндерингом, которая вешает интерфейс }, И по факту блокировка появляется тогда, когда все уже отработало. |
если вы добавляете элемент на страницу, изменяете его свойство видимости.... то, изменения вступят в силу- перерисуется "вью" только после того как скрипт отработает полностью, а все ваши нажатия будут становиться в очередь и запускать создание элементов по новой.
Либо после "добавления блокирующего дива" принудительно заставьте перерисоваться вью - один из методов запросить offset любой , допустим: var preloader = this.createPreloader(); $("body").append(preloader); document.body.offsetWidth; this.cloneAttributeGroup(event); , либо дать самостоятельно обновиться: var preloader = this.createPreloader(); $("body").append(preloader); var that = this; setTimeout(function(){ that.cloneAttributeGroup(event); }, 0); |
С таймаутом сработало как надо!
Большое спасибо! |
|
Часовой пояс GMT +3, время: 10:39. |