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

[vychmat]

Добрый день!

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

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

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

[Erolast]

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

[vychmat]

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

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]

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

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

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

[Vlasenko Fedor]

Польза от documentFragment