Чистый модальный Javascript не отображается в синхронном процессе

#javascript #asynchronous #modal-dialog #popup #ecmascript-5

#javascript #асинхронный #модальный-диалог #всплывающее окно #ecmascript-5

Вопрос:

У меня есть бизнес-требование показывать ожидающий модальный режим перед вызовом синхронного вызова веб-API.

Я использую очень старый код (до 2011 года, если я не ошибаюсь), и, боюсь, у меня возникли проблемы с пониманием, почему он не работает. Мы не используем ES6 Это код для отображения модального:

 showWaitingMessage: function (isShow, title, message) {
        if (isShow) {
            var left = (window.top.$(document.body).width() / 2) - 150   "px";
            div = $("<div></div>");
            div.attr("id", "messageDiv");
            div.attr("align", "center");
            div.css("width", "300px");
            div.css("border", "1px solid #000000");
            div.css("background", "#F7F3F7");
            div.css("z-index", "2000");
            div.css("position", "absolute");
            div.css("left", left);
            var html = "";
            if (title != undefined amp;amp; title != null amp;amp; title != "")
                html  = "<div style='font-family:Tahoma,Arial;font-size:14px;font-weight:bold;padding:10px 10px 0px 10px'>"   title   "</div>";
            html  = "<div style='padding:10px 0px 10px 0px;'><img alt='' src='/_imgs/AdvFind/progress.gif'/></div>";
            if (message != undefined amp;amp; message != null amp;amp; message != "")
                html  = "<div style='font-family:Tahoma,Arial;font-size:12px;padding:0px 10px 10px 10px'>"   message   "</div>";
            div.html(html);
            var top = (window.top.$(document.body).height() / 2) - (div.height() / 2);
            div.css({ "top": top });
            Elad.Global.greyout(true);
            window.top.document.body.appendChild(div[0]);
        }
        else {
            var div = window.top.$("#messageDiv");
            if (div.length > 0)
                div.remove();
            Elad.Global.greyout(false);
        }
    },
 

Вот где я пытаюсь выполнить указанную выше функцию:

  function createReminder() {
    if (shouldCreateReminder()) {

        Elad.Global.showWaitingMessage(true, "אנא המתן...", "אנא המתן ליצירת פעילות המשך עוקבת");

       // logic

            var result = Elad.Global.callWebApi("POST", url, request, null, createReminderErrorCallback);
            Elad.Global.showWaitingMessage(false);

            if (result amp;amp; result.Success) {
             // logic
            }
        }
    }
}
 

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

Спасибо!

Комментарии:

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

2. Спасибо! сработало как по волшебству! Итак, что же произошло, так это то, что DOM ожидает завершения выполнения синхронного кода и только после этого обновляет DOM? применимо ли это ко всем JS? обновления dom «ожидаются» для завершения выполнения кода?