2016-09-26 10 views
3

私はウィンドウのスクロールを検出するかなり簡単な機能を持っています。ユーザーがスクロールを停止すると、タイムアウトイベント(500ms)が発生します。これでリスナとタイムアウトが終了します。次に、ウィンドウをある点にアニメート(GSAP)します。アニメーションが完了すると、リスナーが再び起動します。時々...スクロールが再び検出されるので、関数全体が2回起動されます。これが起こるのを見るためにコンソールを見てください。ここウィンドウがスクロールを正確に検出しない

コード:

var timeout; 
var onScroll = function() { 
    console.log('scrolling...'); 
    if(timeout) { 
    clearTimeout(timeout); 
    timeout = null; 
    } 

    timeout = setTimeout(function() { 
    console.log('done scrolling... stop listening...'); 
    $(window).off("scroll", onScroll); 
    clearTimeout(timeout); 
    timeout = null; 

    // aniamte scroll 
    console.log('start animating scroll...'); 
    TweenMax.to($(window), 0.1, {scrollTo:{y:500}, onComplete:function(){ 
     $(window).on("scroll", onScroll); 
     console.log('done animating scroll. Start litening again.'); 
    }}); 

    }, 500); 
} 
$(window).on("scroll", onScroll); 

例:http://codepen.io/rgbjoy/pen/RGVLBK?editors=0011

どのようにこの出来事はありますか?私は量子理論家に尋ねるべきですか?

答えて

1

あなたのonComplete関数がscrollToトゥイーンが終了する前に呼び出されているようです。

私はこれにonScrollでコンソールログステートメントを変更:

console.log('scrolling to ' + window.pageYOffset); 

それから私は、ログにこれを見た:

"scrolling to 341" 
"scrolling to 340" 
"scrolling to 338" 
"done scrolling... stop listening..." 
"start animating scroll..." 
"done animating scroll. Start litening again." 
"scrolling to 500" 
"done scrolling... stop listening..." 
"start animating scroll..." 
"done animating scroll. Start litening again." 

「500にスクロールすると、」トゥイーンから来るように見えるようにするためonCompleteメソッドが呼び出された後に終了します。

TweenMaxのバグのように思われるので、これに対する解決策はわかりません。

+0

これを深く掘り下げていただきありがとうございます。これはGSAPプラグインのバグかもしれません。私は永遠に頭を叩いていた。私はGSAPプラグインを使いたいのですが、それは他のアニメーションのためにたくさん使うからです。 scrollToプラグインは偉大で使いやすいと聞こえました... – Tom

関連する問題