Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Блокирование интерфейса. Добавление нового элемента (https://javascript.ru/forum/dom-window/45906-blokirovanie-interfejjsa-dobavlenie-novogo-ehlementa.html)

vychmat 20.03.2014 11:56

Блокирование интерфейса. Добавление нового элемента
 
Добрый день!

Суть проблемы: есть некий интерфейс, по нажатию определенной кнопки происходит добавление новых полей и полный ререндеринг всех элементов. Поскольку элементов на вкладке очень много, этот процесс занимает продолжительное время. Это не правильно и в ближайшее время будет переделано, но речь сейчас не об этом.
Необходимо сделать блокировку интерфейса на время, пока происходит перестроение страницы: стандартный прозрачный блок поверх страницы с "Пожалуйста, подождите".
Как я пробовал это реализовать:
1. jquery-плагин $.blockUi();
2. Добавление блокируещего div'a на страницу и show() его, когда необходимо.
3. Создание div'a в скрипте и $("body").append() его, когда необходимо.

Проблема в том, что блокировка, в любом случае, срабатывает после ререндеринга. То есть, по нажатию кнопки запускается функция, которая добавляет блокирующий div на страницу, а затем запускает добавление элементов и ререндеринг вкладки, а в результате по нажатию кнопки интерфейс зависает (ререндеринг), потом появляются новые элементы, а потом срабатывает уже никому не нужная блокировка.

Может кто-нибудь подсказать, с чем это связано и как его бороть?

Erolast 20.03.2014 12:09

То есть как, в коде сначала блокировка, а потом рендеринг, а срабатывает все наоборот?

vychmat 20.03.2014 12:25

Именно.
В коде:

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); // толстая функция с ререндерингом, которая вешает интерфейс
    },


И по факту блокировка появляется тогда, когда все уже отработало.

dmitriymar 20.03.2014 13:09

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

Либо после "добавления блокирующего дива" принудительно заставьте перерисоваться вью - один из методов запросить 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);

vychmat 20.03.2014 14:56

С таймаутом сработало как надо!
Большое спасибо!

Vlasenko Fedor 20.03.2014 15:04

Польза от documentFragment


Часовой пояс GMT +3, время: 10:39.