該窗口檢測到滾動莫名其妙

Question

我有一個相當簡單的功能，檢測窗口滾動。當用戶停止滾動時觸發超時事件（500毫秒）。這結束然後監聽器和超時。然後，我創建（GSAP）窗口到某個點。一旦動畫完成，監聽器會再次啓動。有時候...再次檢測到滾動，所以整個功能被激發兩次。請查看控制檯以查看發生的情況。

代碼在這裏：

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

怎麼會這樣呢？我應該問量子理論家嗎？

Answer 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中的錯誤。