Question

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

我尝试将消息打印到div或p元素，但是没有用。我尝试使用setTimeout执行代码，以允许浏览器进行更新，但这也不起作用。我尝试在span元素中添加“ style =“ position：relative””，但无济于事。

我尝试以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/

执行期间跨度未更新

1 个答案: