アニメーション中にブロックリンクを切り替える

Question

私のコードに小さな問題があり、解決策が見つからない。私のページにはリンク付きのトップバー（ホーム、About、サインアップ）があり、各リンクはそれ自身のコンテンツを持っています。ユーザーが現在「ホーム」のコンテンツを表示していて、「情報」をクリックすると、そのページは「ホーム」のコンテンツを隠してから「情報」のコンテンツを表示することになっています。

しかし、コンテンツがアニメーション化されている間に別のリンクをクリックするとバグがあることに気づいたので、アニメーションがまだ進行中の場合に別のリンクに切り替えるのをブロックするためにAllowLinkSwitchという変数を作成しました。

this.ContentHideThenShow = function(contentHide, contentShow, contentShowHeight) 
{ 
    this.AllowLinkSwitch = false; 
    $(contentHide).animate({ 
     height: "0px" 
    }, 300, function(){ 
     $(contentHide).hide(); 
     $(contentShow).show(); 
     $(contentShow).animate({ 
      height: contentShowHeight 
     }, 300, function(){ this.AllowLinkSwitch = true; }); 
    }); 
} 

まず私は、関数が呼び出されたときfalseにAllowLinkSwitchを設定し、時にアニメーションが終了trueに設定しますが、変数が戻っtrueに設定されることはありませんし、私は他のリンクに切り替えることはできません、上記コードはアニメーション機能の外側にthis.AllowLinkSwitch = true;行を置いた場合にのみ機能しますが、そのバグがまだ発生しているため、そのような動作をしたくない場合は、アニメーションが終了したらtrueに設定する必要があります。

Answer 1

animate()コールバック内で、thisは外部オブジェクトと同じ参照になりません。その関数の外部に参照を格納する必要があります。これを試してみてください：

this.ContentHideThenShow = function(contentHide, contentShow, contentShowHeight) { 
    var _this = this; // store reference here 
    _this.AllowLinkSwitch = false; 
    $(contentHide).animate({ 
     height: "0px" 
    }, 300, function() { 
     $(contentHide).hide(); 
     $(contentShow).show().animate({ 
      height: contentShowHeight 
     }, 300, function(){ 
      _this.AllowLinkSwitch = true; // use here 
     }); 
    }); 
} 

また、あなたは完全に要素が現在アニメーション化されたかどうかを確認し、あなたのコード内の必要な場所に発生するロジックを防ぐためにif (!$(contentShow).is(':animated'))を使用してアニメーション状態フラグの使用を避けることができます。

Answer 2

あなたのthis.AllowLinkSwitch変数はtrueに設定されていますが、機能スコープでのみ設定されているため、グローバル変数を使用する必要があります。