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

改为使用它（无需向页面添加任何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);
        }

Answer 2

@keith建议的解决方案是将 getRecords 函数从同步转换为异步。

我最终使用 setTimeout 技巧使整个功能 selectedValueChanged （）“ 异步”。

一种适用于我的解决方案如下：

 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);
   }

现在，我呼叫 selectedValueChangedUP ，而不是呼叫 selectedValueChanged 。

SetTimeout 的作用是执行给定时间后作为参数接收的函数。此过程以“ 异步”方式完成。

为什么我的html元素未显示在以下函数中

2 个答案: