forループ内のjQueryの追加動作

forループでjQueryの.append()メソッドの動作が混乱しています。forループ内のjQueryの追加動作

このコードはdiv要素にファイル名を添付して表示します。それは正常に動作しますが、私はコードを読んでいます、そして、私は、ファイル名が順番に/それがループするにつれて追加されることを理解しています。しかし、ループが終了すると一緒に表示されるように見えます。私はまた、それをチェックする警報で傍受しようとしました。

なぜこのように起こりますか？

$("#fileInput").on("change", function() { 
    $(".input-feedback").html(''); 

    for(var i = 0; i < this.files.length; i++) { 
     var file = this.files[i]; 
     console.log(file.name); 

     alert('test'); 
     $(".input-feedback").append("<p>"+ file.name +"</p>"); 
    } 
});

出典

2017-11-09 MysticalRose

そうではありません。それらは一度に1つずつ追加されます。読み込み時間が非常に少ないので、違いは見えません –

ブラウザはappendを呼び出すたびにページを再レンダリングしません。スクリプトが終了してからページを再描画するまで待機します。さもなければそれは実際的な利点なしで非常に遅いでしょう。 – JJJ

yea jqueryは、フレームレンダリングの直前にだけ追加して、再レンダリングを減らすこともできます。 –