Почему мой HTML-элемент не отображается в следующей функции

Question

Моя цель - показать шторку загрузки, когда запрос к Quick-Base занимает слишком много времени.

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

Мой код:

<script>
window.onload = function(){

// .. more code here not related ...

    function selectedValueChanged() {

    $('#curtain').show();   

    var e = document.getElementById("record_id_select");
    var value_selected = e.value;
    var CO_picked_record_id = parseInt(value_selected);
    var query_CO_line_details = "{'"+related_CO_fid+"'.EX.'"+CO_picked_record_id+"'}";
    var records = getRecords(table_CO_line_details_DBID,query_CO_line_details);
    var data_array = createArrayFromRecordsDrilled(records,CO_detail_record_categories);
    var table_div = tableCreate(data_array,'table_container_1',"Please Enter Quantities",headerList);
    $('#table_container_1').replaceWith(table_div);

    $('#curtain').hide();

     }
    }
</script>

<div id='curtain' style='position:absolute;top:0;left:0;margin:0;background:rgba(255,255,255,.3); display:none; width:100%;height:100%;'><img id ="loading_text" src="loader.gif"></div>

</body>

Код работает, но шторка никогда не отображается, даже если запрос занимает пару секунд (целых 6 секунд).Если я закомментирую строку "$ ('# curtain'). Hide ();" , я могу видеть загрузочную шторку, работающую, как и ожидалось, но только после завершения запроса.Это как если бы функция не выполнялась построчно, но сначала она ожидает выполнения запроса, а затем показывает занавес.Я уверен, что что-то упустил, но я не знаю что.Спасибо.

Answer 1

Решение, предложенное @keith, заключалось в том, чтобы "преобразовать" функцию getRecords из синхронный в асинхронный .

В итоге я сделал целую функцию selectedValueChanged () " asynchronous " с помощью трюка setTimeout .

Одним из решений, которое сработало для меня, было следующее:

 function selectedValueChanged() {

    var e = document.getElementById("record_id_select");
    var value_selected = e.value;
    var CO_picked_record_id = parseInt(value_selected);
    var query_CO_line_details = "{'"+related_CO_fid+"'.EX.'"+CO_picked_record_id+"'}";
    var records = getRecords(table_CO_line_details_DBID,query_CO_line_details);
    var data_array = createArrayFromRecordsDrilled(records,CO_detail_record_categories);
    var table_div = tableCreate(data_array,'table_container_1',"Please Enter Quantities",headerList);
    $('#table_container_1').replaceWith(table_div);

     }
    }

     function loadingSelectedValueChanged(callbackFunct){

         setTimeout(function(){
             callbackFunct()
             $('#curtain').hide(); 
         },10);
     }

     function selectedValueChangedUP() {

      $('#curtain').show(); 
      loadingSelectedValueChanged(selectedValueChanged);
   }

И теперь вместо вызова selectedValueChanged я вызываю selectedValueChangedUP .

Что SetTimeout делает, чтобы выполнить функцию, которая получает в качестве параметра через заданный промежуток времени. Этот процесс выполняется " асинхронным " способом.

Answer 2

используйте это вместо этого (не нужно добавлять HTML на страницу):

 function showLoading() {
            if (document.getElementById("loadingDiv"))
                return;

            var div = document.createElement("div");
            var img = document.createElement("img");
            var span = document.createElement("span");
            span.appendChild(document.createTextNode("Loading ..."));
            span.style.cssText = "margin-top:50vh;font-family:IranSans;direction:rtl;color:#f78d24;"

            img.src = "/images/LoadingImage.png";
            img.style.cssText = "display:block;margin:auto;margin-top:calc(50vh - 64px);width:128px;height:128px;"

            div.style.cssText = "position:fixed;width:100vw;height:100vh;background-color:rgba(0,0,0,0.85);top:0px;left:0px;z-index:10000;text-align:center";
            div.id = "loadingDiv";
            div.appendChild(img);
            div.appendChild(span);
            document.body.appendChild(div);
        }

        function hideLoading() {
            var div = getElementById("loadingDiv");
            if (div)
                document.body.removeChild(div);
        }