javascript - 如何在运行 javascript 时允许网页更新？

Question

必须有一个简单的方法来做到这一点，但我是 JS 的新手。

我有一个 javascript 程序，它 (1) 接受用户输入，(2) 根据该输入更新网页，然后 (3) 执行冗长的计算。问题是网页在经过冗长的计算后才注册更新。有没有办法暂停执行，以便页面可以在长时间计算之前更新？

我试过 setTimeout 和 window.setTimeout，但它们没有任何区别。

该程序用于玩游戏:用户输入一个 Action ，脚本更新位置，然后计算下一步 Action 。 postMessage 使用 div.innerHTML 打印文本消息； buttonFn 从用户那里获取输入，更新位置，打印消息，然后开始计算机计算。

function buttonFn(arg){
    var hst = histButt;
    hst.push(arg);
    var nwmv = hst.clone();

    postMessage("New move: " + nwmv.join());
    if(status == opposite(comp) && !pauseQ){
    var mvsposs = movesFromPos(posCur,status);
    if(mvsposs.has(nwmv)){
        updatePosCur(nwmv);
        //waitasec();
        if(comp == status && !pauseQ){
        compTurn();
        };
    }
    else{
        histButt = nwmv;
    };
    };
};

Answer 1

是的，像这样调用你的函数。使用 setTimeout 将允许在您的 JS 执行之前进行页面回流。

function buttonFn(arg){
    var hst = histButt;
    hst.push(arg);
    var nwmv = hst.clone();

    postMessage("New move: " + nwmv.join());
    if(status == opposite(comp) && !pauseQ){
    var mvsposs = movesFromPos(posCur,status);
    if(mvsposs.has(nwmv)){
        updatePosCur(nwmv);
        //waitasec();

        if(comp == status && !pauseQ){
        setTimeout(function(){
          compTurn();
        },0);

        };
    }
    else{
        histButt = nwmv;
    };
    };
};

请记住，JS 对事件驱动非常友好。如果你能把东西移开，然后再调用他们，那就去做吧。这是我们支持类似多线程行为的唯一方法。

setTimeout