私はjQueryのカルーセルプラグイン（jCarouselLite）を実装していると私がしようとしている</p> <p>... jQueryが同時に

Question

申し訳ありませんが、複数の呼び出しを実行しているようだが、どうやら私はこの問題を把握するのに十分な連鎖を理解していません「リフレッシュ」jCarouselLiteプラグインへのクリーンな方法はありませんので

...カルーセル項目（現在 <div class="remove">）のいずれかを「削除」に

initEvents: function() { 
     var self = this; 
     // Bind jQuery event for REMOVE button click 
     $('.remove').live('click', function() {  
      // Need to save the ID that we're removing 
      var item = $(this).closest('li.sort'); 
      var itemId = item.attr("id"); 

      $(this).removeItem(); 

      self.refreshDisplay(itemId); 
     }); 


$.fn.removeItem = (function() { 
    var item = this.closest('li.sort'); // could save this call by passing param 

    item.fadeOut("normal", function() { 
     $(this).remove(); 
     }); 

    // preserve jQuery chain 
    return this; 
}); 
}, 

refreshDisplay(itemId) { 
    // ... 
    // redraws carousel 
    // ... 
    // itemId is used to remove from the array of Items to show (class-wide scope) 
} 

をオプションを追加することが（多分何かが私が実際に実装してみますプラグイン後で）、このための迅速で汚れた修正は、カルーセルを再生成することです。

問題は、クリックされた要素をフェードアウトしようとしていますが、クリックした項目のフェードアウト（および削除）のアニメーションが完了する前にrefreshDisplay（）が呼び出されたようです。私はself.refreshDisplay(itemId);行をコメントアウトすることでこれを確認し、期待通りにフェードアウトして削除します。

私はこれをチェーン化する必要があると思いますか？私は連鎖がどのように機能するかについて数時間の読書をしましたが、私はそれを理解していると思っていましたが、明らかにそうではありませんでした。

ご協力いただきありがとうございます！

Answer 1

連鎖の目的は、複数のコマンドが基本オブジェクトを共有できるようにすることですが、各コマンドが前のコマンドを待つことはありません。

そのためには、コールバックを使用する必要があります。何かのように

initEvents: function() { 
     var self = this; 
     // Bind jQuery event for REMOVE button click 
     $('.remove').live('click', function() {  
      // Need to save the ID that we're removing 
      var item = $(this).closest('li.sort'); 
      var itemId = item.attr("id"); 

      $(this).removeItem(function() { 
       self.refreshDisplay(itemId); 
      }); 
     }); 


$.fn.removeItem = (function(callback) { 
    var item = this.closest('li.sort'); // could save this call by passing param 

    item.fadeOut("normal", function() { 
     $(this).remove(); 
     callback(); //now your refresh is being called after the fade. 
     }); 

    // preserve jQuery chain 
    return this; 
}); 
},