跨度在执行期间未更新

Question

我通过在每次新计算开始时打印一条消息来显示需要很长时间才能完成的代码的进度。消息被打印到一个 span 元素。但是，这只适用于 Firefox。在 Chrome 中，跨度仅在所有计算完成后才会更新。

我尝试将消息打印到 div 或 p 元素，但没有成功。我尝试使用 setTimeout 执行代码，以允许浏览器更新，这也不起作用。我尝试将 "style="position: relative"" 添加到 span 元素，但没有帮助。

我尝试在 Chrome 隐身模式下运行代码，但没有成功。

javascript：

// Export teachers
function export_teachers (){

    // Update progress span
    $("#span_progress_export").html("Export teachers");

    [...]

}

$(document).ready(function(){

    // Data confirmed for export
    $(document).on("click","#button_confirm_timetable", function() {
        export_teachers();
        export_classgroups();
        export_classrooms();
    });

});

html:

<button id="button_confirm_timetable">confirm timetable</button> 
<span id="span_confirm_status"></span>
<br><br><span id="span_progress_export">Start export</span>

每次新计算完成时，跨度都应该更新。我可以在控制台的源代码中看到跨度文本更新，但在网页上看不到。在 Firefox 中，一切正常。

Answer 1

试试这个：

html

<button id="button_confirm_timetable">confirm timetable</button> 
<span id="span_confirm_status"></span><br><br>
<span id="span_progress_export">Start export</span>

jquery

// Export teachers
function export_teachers (){
   // Update progress span
   $("#span_progress_export").html("Export teachers");
}

$(document).ready(function() {
   $("#button_confirm_timetable").click(function() {
      export_teachers();
 });
});

工作演示：https://jsfiddle.net/cruz888/pmy7ufta/2/