为什么我的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（）;”行注释掉 我可以看到加载窗帘按预期方式工作，但仅在查询完成后才能进行。好像该函数不是逐行执行的，但它首先等待完成查询，然后显示幕布。我确定我想念什么，但我不知道。谢谢你。