Javascript оверлей занятости не отображается, если задано отображение перед долгой функцией манипулирования DOM

Question

У меня есть большой набор данных (https://datatables.net/), который мне нужно воссоздать после нажатия кнопки. Это воссоздание занимает пару секунд, поэтому я хотел бы отобразить «overlay-overlay», когда это делается.

Проблема в том, что DOM не обновляется (т.е. наложение не отображается ) до того, как он замерзнет при (повторной) обработке таблицы. После того, как это сделано, оно ненадолго появляется и исчезает.

function addColumn(filterToggle, propertyName, table) {
    $('#ResultsTable').closest('.card').find('.overlay').fadeIn();    
    table.destroy();
    //do stuff    
    table = getProjectsTable();
    //do more stuff
    $(overlay).fadeOut();
}

Полагаю, мне нужно немного подождать, чтобы оверлей действительно был виден, прежде чем продолжить выполнение - но как?

Большинство вопросов о методе 'javascript' sleep () 'в большинстве случаев говорят о том, что это хакерский хакер ...

Answer 1

ОК, хорошо, благодаря комментарию Петра, я решил это с помощью setTimeout ().

Для записи, рабочий код:

    function addColumn(filterToggle, propertyName, table) {
        $('#ResultsTable').closest('.card').find('.overlay').fadeIn();    

        setTimeout(function(){
             table.destroy();
             //do complex stuff here
             table = getProjectsTable();
             //do more stuff
        },10);

        $(overlay).fadeOut();
    }