シンプルなjQuery連鎖の洞察

Question

私はjQueryの連鎖能力を理解していると思っていましたが、今はちょっと混乱しています。 jQueryの連鎖のロジックによって

• を、私が行うことができるはず：DIVをフェードアウトし、それを除去する例を使用して

  $(this).parent().fadeOut(500).remove(); 
  

しかし、その代わりにIこれを行う必要があります：

$(this).parent().fadeOut(500,function() { $(this).remove(); }); 

なぜですか？ありがとう！

Answer 1

.fadeOut()操作はすぐに（アニメーションを開始するだけで）すぐに戻る非同期操作であり、タイマーを介して実行を継続するため、すぐには.remove()に電話をかけることはできません。 .fadeOut()が戻り、次の連鎖操作が実行されると、アニメーションは開始されたばかりであり、完了していません。通常のチェーンで.remove()を実行した場合は、アニメーションが進行する前に直ちに削除します。

アニメーションの完了コールバックが呼び出されるまで待ってから削除する必要があります。

もう1つのチェーンアニメーションコールは例外です。アニメーションはアニメーションキューに入る特殊なケースなので、アニメーションを連結できます。アニメーションが開始されると、その後のアニメーションコールでは、すでにアニメーションが進行中であることがわかり、内部のキューに入ります。最初のアニメーションが終了すると、アニメーションキューをチェックして、より多くの連鎖アニメーションが開始するかどうかを確認します。

javascriptのほぼすべての非同期操作は、このように非ブロック化されています。つまり、それらを開始する呼び出しは、それを開始する呼び出しです。その呼び出しはすぐに戻り、操作の残りはタイマーや他のイベントを経て実行され、その後のJavaScriptは実行を継続します（他の連鎖メソッドを含む）。補完コールバックを登録することによって、操作が実際に完了したときのみを知ることができます。

同じことがなどのAjax操作、画像の読み込みのために真である...

あなたは、アニメーションキューを介して.remove()方法の仕事を作成する方法について考えて私を得ました。

$.fn.fxRemove = function() { 
    this.queue(function(next) { 
     $(this).remove(); 
     next(); 
    }); 
    return(this); 
} 

削除のこの形式は、アニメーションキューに入り、それが行われる前にアニメーションが連鎖したときに実行されます：一つは、実際には削除の新しいバージョンを作成することにより、（）のようにそれを行うことができます。だから、あなたはそれから使用できます。

$(this).parent().fadeOut(500).fxRemove(); 

ここで働く例があります：

$(this).parent().fadeOut().delay(500).remove(); 

Answer 2

が道にそれを試してみてください。

DEMO

$.fn.q = function(fn) { 
    var that = this, arg = Array.prototype.slice.call(arguments, 1); 

    return this.queue(function(next) { 
     that[fn].apply(that, arg); 
     next(); 
    }); 
}; 

用法：

$(this).parent().fadeOut(500).q('remove'); 

Answer 3

あなたはそれがあなたを待って作るためにプラグインを作成することができますhttp://jsfiddle.net/jfriend00/3Hg6G/