1

私のコード:

<!DOCTYPE html>
<html>
<body>
<button id="start" onClick="myFunction()">Start</button>
<div id="output"></div>
<script>
function myFunction() {
    for(i=3; i>0; i--) {
        console.log(i);
        document.getElementById('output').innerHTML = i;
        pause(5000);
    }
}

function pause(milliseconds) {
    var dt = new Date();
    while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}
</script>
</body>
</html>

数字 3、2、1 は 5 秒間隔でコンソールに表示されますが、div では 15 秒後に数字 1 (実際にはすべての数字) が表示されます。コンソールがディスプレイと同期されないのはなぜですか? 命令間の霧氷を止める他の方法はありますか?

4

1 に答える 1

1

関数が機能しない理由は、基本的に、すべての実行が一瞬完了するまで DOM の変更が処理および表示されないためです。それを機能させる最も簡単な方法はsetTimeout、特定の時間待機してから提供された関数を呼び出す呼び出しです。たとえば、次の関数を使用してコードを機能させることができます。

この関数は、setTimeout呼び出しを介して再帰的に呼び出し、DOM が更新されていることを確認します。

function myFunction(i) {
  (function doStuff() {
    console.log(i);
    document.getElementById('output').innerHTML = i;
    i -= 1;

    if (i >= 0) {
      setTimeout(doStuff, 5000);
    }
  }());
}

myFunction(3);
<div>
  Counter: <span id="output">X</span>
</div>

于 2015-12-28T21:30:34.543 に答える