时间戳

首页 > 解决方案 > 仅在长函数完成后由 JS 更新的 HTML 元素，即使放在之前

javascript - 仅在长函数完成后由 JS 更新的 HTML 元素，即使放在之前

问题描述

问题如下：我想修改一个 h1（id="waiting"），然后执行一个需要几秒钟才能完成的函数（解决）。

function solveWrapper(table) {
        document.getElementById("waiting").innerHTML = "Wait please, Nurikabe is being solved...";
        alert("alert");
        var currentState = new State(table);
        solve(table, currentState);
    }

使用此代码，我在调用求解函数之前收到警报，但仅在该函数执行完成后才修改 h1 标记。有谁知道如何解决这一问题？这是调用solveWrapper的按钮：

<button onclick="solveWrapper(grid);">Solve</button>

这是整个代码：https ://github.com/jackowski626/projects/blob/master/Nurikabe_SJ_Solver.html

标签： javascripthtml

解决方案

将调用放入solve()超时处理程序中：

function solveWrapper(table) {
    document.getElementById("waiting").innerHTML = "Wait please, Nurikabe is being solved...";
    var currentState = new State(table);
    setTimeout(function() {
      solve(table, currentState);
    }, 10);
}

浏览器推迟更新视图直到事件循环完成，除非他们别无选择。

推荐阅读