由于繁重的 JS 函数，未调用 HTML 元素更新事件答案

【问题标题】：HTML element update event not called because of heavy JS function由于繁重的 JS 函数，未调用 HTML 元素更新事件
【发布时间】：2019-11-18 00:50:32
【问题描述】：

我有一个在 JS 函数中运行的 CPU 密集型操作。为了向用户指示它何时开始和停止，我试图显示一个徽章。代码如下所示：

function updateView() {
    console.log(1)
    document.getElementById('app-status').className = "badge badge-danger";
    document.getElementById('app-status').textContent = "Processing";
    console.log(2)
    setTimeout(myUpdateView(), 0)
    console.log(5)
    document.getElementById('app-status').className = "badge badge-success";
    document.getElementById('app-status').textContent = "Ready"; console.log(6)

}

function myUpdateView() {

    console.log(3)

    updateFlightParameters();

    // Get departure airport.
    var departureAirportICAO = $("#DEPARTURE_AIRPORT").val();
    if (airports[departureAirportICAO] === undefined) {
        alert("Departure airport is incorrect.");
    } else {
        departureAirport = airports[departureAirportICAO];
    }
    // Get arrival airport.
    var arrivalAirportICAO = $("#ARRIVAL_AIRPORT").val();
    if (airports[arrivalAirportICAO] === undefined) {
        alert("Arrival airport is incorrect.");
    } else {
        arrivalAirport = airports[arrivalAirportICAO];
    }

    // Create waypoints.
    createWaypoint(departureAirport);
    createWaypoint(arrivalAirport);

    // Create path. THIS FUNCTION CALLS SOME OTHER ASYNC FUNCTIONS.
    generatePolylines(flightWaypoints);
    console.log(4)

}

问题是app-status 元素永远不会改变它的颜色或文本。单击调用updateView() 的按钮后，页面会挂起（进行处理）而不更改元素。

【问题讨论】：

如果你这样做了setTimeout(doHeavyProcessing,100)
stackoverflow.com/questions/42773714/…
setTimeout( doHeavyProcessing, 0) 也可以使用
能否验证控件是否从doHeavyProcessing方法返回？
@ArslanIqbal 我已经更新了我的代码。

标签： javascript html css bootstrap-4

【解决方案1】：

繁重的处理函数是否返回任何内容？这似乎是一个 do-while 语句的好主意。

const doSomethingCool(){
 let trackingVariable = false;
 do{
 result = setInterval(massiveCompute, 100)
 if(result === true){
  trackingVariable = true;
 }
} while (trackingVariable == false)

【讨论】：

【解决方案2】：

我会确保电脑有时间更新屏幕：

function doHeavyProcessing() {
  for (var i=0;i<1000000000;i++) ;
  document.getElementById('app-status').className = "badge badge-success";
  document.getElementById('app-status').textContent = "Ready";
}

function updateView() {
  document.getElementById('app-status').className = "badge badge-danger";
  document.getElementById('app-status').textContent = "Processing";
  setTimeout(doHeavyProcessing,100)
}
updateView()

.badge-danger { color:red }
.badge-success { color:green }

&lt;div id="app-status"&gt;&lt;/div&gt;

【讨论】：

那么你没有告诉我们完整的故事。 doHeavyProcessing 实际上做了什么，它是一个异步函数吗？
您是否将document.getElementById('app-status').className = "badge badge-success"; document.getElementById('app-status').textContent = "Ready"; console.log(6) 移至myUpdateView 函数的末尾？
我试过了，它导致文本在函数执行之后被更改为“处理中”，并且它再也没有设置为“就绪”。
使用setTimeout(myUpdateView(), 100) ?
是的。我相信这是由于正在调用的异步函数。