jQuery/JavaScript実行手順

Question

jQueryを使用してフィルタリングできるようにしたい項目がいくつかあります。ユーザーはフィルタ条件を選択して送信を実行し、自分のデータベースに電話をかけます。

function clearGrid() { 
    var theseDivs = $('.grid-item'); 
    $('.grid-item').fadeOut('fast', function() { 
    $(theseDivs).remove();  
    }); 
} 

をして、私は次の関数で私の新しいデータを追加：この呼び出しが完了すると、私はこの機能を既存のコンテナをフェードアウト

function repopulate() { 
    <% @stuff.each do |gb| %> 
    $('#grid').append('<%= escape_javascript(render "/stuff", :gb => gb) %>'); 
    <% end %> 
    resizeGrid(); 
} 

resizeGrid（）関数は、いくつかの絶対配置を行いますグリッド内の他の要素に基づいています。他の要素がclearGrid（）で削除される前にrepopulate（）が呼び出されているようで、新しい要素の配置がオフで、古い要素がまだ存在するかのようにレンダリングされているようです。

私のrepopulate（）関数が呼び出されないようにする方法はありますか？

Answer 1

と再移植の方法を遅くしてみます。このように、これらの2人のルックスを呼び出すために、あなたの現在のコードを想定し、

function clearGrid(callback) { 
    var theseDivs = $('.grid-item'); 
    theseDivs.fadeOut('fast', function() { 
     theseDivs.remove(); 
     if(callback) { 
      callback(); 
     } 
    }); 
} 

そして：

clearGrid(); 
repopulate(); 

あなたはこのように見えるし、それを変更することができます。

clearGrid(repopulate); 

このように見えるように clearGrid()を変更

注：repopulateは、その後に()を持つべきではありません。なぜなら、参照を渡して呼び出したいからではないからです。

2番目の注記：また、clearGrid()をtheseDivsに変更して、jQueryをもう一度呼び出すのではなく、おそらくこの違いに気づくことはできませんが、この方法で少し速いです。

<div>タグがあることがわかっている場合は、別の小さなスピードアップのためにセレクタを$('div.grid-item')に変更することができます。

Answer 2

はあなたがclearGrid()機能は、それが完了しています後にコールバックを呼び出し、そのコールバックとしてrepopulate渡しできるようにする必要があり

setTimeout(function(){ repopulate(); }, 50);