4

申し訳ありませんが、この問題を理解するのに十分な連鎖を理解していないようです...

jQuery カルーセル プラグイン (jCarouselLite) を実装しており、カルーセル アイテムの 1 つを「削除」するオプションを追加しようとしています (現在は<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)
}

jCarouselLite プラグインを「更新」するクリーンな方法がないため (後で実際のプラグインに実装してみようと思います)、これに対する手っ取り早い修正方法は、Carousel を再生成することです。

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

だから、これを連鎖させるために必要な特定の方法があると思いますか？私は連鎖がどのように機能するかについて数時間読んだことがありますが、それを理解していると思いましたが、明らかにそうではありません.

どんな助けでも大歓迎です、ありがとう！

4

1 に答える 1

3

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

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

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;
 });
},
于 2010-12-03T19:43:21.443 に答える