スクロールアニメーション（jQuery.appear.js）中のスクロールトリガーを禁止しますか？使用

Question

：jQuery.appear.jsとcountUp.jsプラグイン

をユーザーがスクロールしているとき、私は問題を取得しています、イベントが継続的にトリガなっています。私はまた、jQuery.appearプラグインなしでそれをやってみてon.scroll(function(){});を使ってみましたが、私は同じ結果を得ます。アニメーションが完了する前にスクロールイベントが発生すると、アニメーションがトリガされ、アニメーションが誤動作することがあります。私は$(window).unbind('scroll');を試しましたが、それは他のオンスクロールアニメーションを壊します。

var $element = $('.element'); 
$element.appear(); 
$(document.body).on('appear', '.element', function() { 
    var $this = $(this), 
     countTo = $this.attr('data-count'); 

    $({countNum: $this.text()}).animate({ 
      countNum: countTo 
     }, 
     { 
      duration: 1000, 
      easing: 'linear', 
      step: function() { 
       $this.text(Math.floor(this.countNum)); 
      }, 
      complete: function() { 
       $this.text(this.countNum); 
      } 
     } 
    ); 
}); 

アニメーションの進行中にスクロールイベントがアニメーションをトリガーしないようにするにはどうすればよいですか？

チェックアウトhttps://jsfiddle.net/efqhgg5L/彼らがまだ目を覚ましている間に数字の周りをスクロールし続けると、アニメーションは完了しません。

Answer 1

この問題は、appearイベントがトリガーされる頻度にあり、スクロールするたびに常にトリガーされます（jquery.appear.jsがコード化されていると仮定します）。イベントバインディングを$(document.body).on('appear', ...)から$(document.body).one('appear',...)（1対1）に変更すると、イベントは初めてトリガされます。委任されたイベント処理（ドキュメントにイベントを設定し、イベントターゲットを確認する）を使用しているため、表示される最初のカウンタに対してのみトリガされます。

解決策1：すでに登場しているカウンタを追跡し、既に.animateを再度実行する前に出現したカウンタで出現イベントが発生した場合は、独自のロジックを実装できます。これは、すべてのカウンタに対して状態（最初に現れた状態）を格納することによって行うことができます。

解決策2：または、おそらく簡単な方法として、カウンターでアニメーションを開始してクラスを追加し、そのクラスをクラスなどで確認します。 jQueryのhasClassとreturnの前に.animateを再度実行してください。