2

以下のコードが期待どおりに動作しない理由を理解するのに問題があります。私はそれがすることを期待します：

  1. 黄色い枠でaaaを表示し、
  2. 次に、UIを短時間ブロックします（forループ）
  3. 次に、ピンクの枠に「なし」を表示します

setTimeout(aaa,0) を setTimeout(aaa,100) に置き換えると、毎回正常に動作しますが、setTimeout(aaa,0) で aaa 関数をキューに入れて、aa が実行される前にブラウザーが再描画できるようにすべきではありません? 毎回ステップ1〜3に従うことを期待していますが、明らかに何かが欠けています。毎秒実行するだけでこのように動作するようです。

コードは以下にあり、http://jsfiddle.net/dDJ8L/でフィドルを作成しました。

HTML

<div id="aaa" style="border: 1px solid green">aaa</div>

Javascript

div = document.getElementById("aaa");

div.style.border = "1px solid red";


function aaa() {

    for (var i = 0; i < 1000000; i++) {
        div.innerHTML = i;
    }
    div.innerHTML = "nothing";
    div.style.border = "1px solid pink";
}

div.style.border = "1px solid blue";
setTimeout(aaa, 0);
div.style.border = "1px solid yellow";
4

2 に答える 2

1

コードは 1、次に 2、そして 3 を実行します。順を追って説明します。

1. aaa を黄色い枠で表示

div.style.border = "1px solid red";
div.style.border = "1px solid blue";//overwrites red
div.style.border = "1px solid yellow";//overwrites blue

ここでは、最後の定義が優先されます。これにより、div に黄色の境界線が表示されます。HTML のデフォルトのテキストは「aaa」でした。

2.その後、UIを短時間ブロックします（forループ）

setTimeout(aaa, 0);
function aaa() {
 for (var i = 0; i < 1000000; i++) {
    div.innerHTML = i;
 }
 ...
}

をに0使用すると、ブラウザsetTimeoutで許可されている最小の間隔が使用されます。ほとんどの場合、これは 4 ～ 10 ミリ秒の範囲であると想定できます。本当に、そこにあるコードは. いずれにせよ、ここでは「短い時間」が非常に短いため、タイムアウトによる一時停止は見られません。さらに、タイムアウトにより、関数呼び出しが順次ではなく非同期で発生します。これは、関数が実行される前に残りのコードが実行されることを意味します。1,000,000回の反復を超えるforループは、実際には非常に高速です（最初のループの後に変更がないため、V8などの一部のエンジンは実際にループの残りを理想的に最適化します）。setTimeout(aaa, 10);aaa

3.次に、ピンクの枠で「何も」を表示します

div.innerHTML = "nothing";
div.style.border = "1px solid pink";

このコードは関数の最後にあり、aaa「何もない」というピンクの境界線で最終結果を表示します。

これはコード全体のフィドルです: jsFiddle Demo

于 2013-09-17T00:46:57.190 に答える