0

我的目标是在对 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();”行 我可以看到加载窗帘按预期工作，但只有在查询完成后。就好像该函数不是逐行执行，而是先等待完成查询，然后显示幕布。我确定我错过了一些东西，但我不知道是什么。谢谢你。

4

2 回答 2

0

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

现在我没有调用selectedValueChanged，而是调用selectedValueChangedUP。

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

于 2019-05-25T20:37:26.083 回答
0

改用它（无需向页面添加任何 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);
        }
于 2019-05-10T14:09:22.777 回答