append（）関数の間に発生する遅延を処理する方法は？

Question

jqueryを使用してdivに配列を追加していますが、このときに小さなローディングインジケータを表示したいので、コールバック関数を追加ロジックにスローしました。しかし、私の配列がdivに描画される前に、私のローダーはそれを消して.hide()になります。

のみの配列が絵を完了した後に.hide()を実行することができる方法私はありますか？ここで

var contentpush = []; 
// create x-amount of divs (x being 'tabs') 
for (var i = 0; i < tabs; i++){ 
    contentpush.push('<li class="tab" role="tab"><a href="#tab'+(i+1)+'"><span class="icon"><span class="'+contentformat[i].icon+'" ></span></span><span class="title">'+contentformat[i].title+'</span></a></li>'); 
} 

$('.tablist').append(contentpush.join('')).ready(function(){$('#skeleton').hide(); });; 

も同様に何が起こっているのGIFです：

あなたが見ることができるように私の配列は、実際のdivに塗装される前に、骨格フレームローダは長く消えます。これに関する考えは大いにありがたいです！

Answer 1

タイムアウトを数ミリ秒間設定しようとしましたか？

Answer 2

残念ながら、jQueryの.append()機能は、コールバックが含まれていません。おそらくすぐに起こると思われるので、実際に完了を確認する方法はありません。タイムアウトまたは間隔を使用して非同期であることを明示的に指示しない限り、それらが来る順序で同期的に実行されます。 see this

これは、.appendメソッドが実行され、そのメソッドがそのジョブを終了するまで実行されないことを意味します。次のように試してください

// set a time interval for the event to complete. 
$(contentpush).hide().appendTo(".tablist").fadeIn(1000); 

// a small tweak to set a call back function. 
$(".tablist").append(contentpush).append(function() { $('#skeleton').hide(); });