1

私は自分の質問を実証するために非常に単純なループを作成しました:

  var listMaker = function() {
     document.getElementById('list').innerHTML = "";
     var i = 1;
     while (i < 150) {
        document.getElementById('list').innerHTML += "<li>" + i + "</li>";
        i++;
    }
};​

この関数はすぐにリストへの出力を開始し、一度に番号を 1 つずつ追加すると思います。

代わりに、終了するまで待機してから、150 個の番号の完全なリストをプッシュします。

http://jsfiddle.net/mholubowski/CFQ8K/1/ <-実際の例、チェックしてください!

なんで？

4

2 に答える 2

2

ブラウザーは JS を実行し、同じスレッドでページの更新を行います。これは、関数の実行中に表示が更新されないことを意味します。つまり、ある意味では、アイテムは一度に 1 つずつ追加されますが、それらがすべて追加された後、ディスプレイが再描画されるまでそれらを見ることはできません。

ユーザーの観点から見ると、ブラウザーは JS が終了するまでロックされるため、長時間のループはお勧めできません。

を使用してループを書き直すsetTimeout()と、ページに一度に 1 つずつ表示されることがわかります。

var listMaker = function() {
    var list = document.getElementById('list'),
        i = 1;
    function doNext() {
        if (i < 150){
            list.innerHTML += "<li>" + i + "</li>";
            setTimeout(doNext, 100);
            i++;
        }
    }
    doNext();
};​

デモ: http://jsfiddle.net/CFQ8K/2/

このsetTimeout()関数は、後で実行できるように関数の実行をキューに入れ、現在の関数を完了させ、ブラウザが画面を再描画できるようにします。

の 2 番目のパラメーターsetTimeout()は、ミリ秒単位の遅延です。明らかに、目的の効果に応じて適切に設定します。

于 2012-11-01T04:39:21.253 に答える
0

これが私の試みです（基本的に最初の答えと同じですが、それでも独立して到達しましたが、即時呼び出し匿名関数（IIAF）を使用しています：

フィドル

(function() {
    var i = 1,
        list = document.getElementById('list');
        list.innerHTML = "";
    function addToList() {
         if (i < 16) {
             list.innerHTML += "<li>" + i + "</li>";
             i++;
             window.setTimeout(addToList, 300);
         }
    }
    addToList();
})();​
于 2012-11-01T05:26:15.207 に答える