2014-11-05 286 views
0

我在mousewheel上有一個事件偵聽器。執行的腳本應執行以下操作:使用requestAnimationFrame設置setTimeout期間的控制檯錯誤

  • +1或-1從取決於滾動方向
  • 不允許所述可變至2秒內最後變化
  • 使用requestAnimationFrame後上改變一個變量在mousewheel事件偵聽器,所以瀏覽器是不是經常發射功能

我讀過很多關於​​但無可否認我仍然不認爲我完全理解。

這裏是我的代碼:

//request animation frame 
window.requestAnimFrame = (function(){ 
return window.requestAnimationFrame  || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     function(callback){ window.setTimeout(callback, 1000/60); }; 
})(); 


//vars 
var pane = 1; 
var scrollPause = false; 


//user scrolling 
function scrolling(e){ 

    //return if scroll paused 
    if (scrollPause) return; 

    //scroll up 
    if (e.wheelDelta < 0) { 
    pane += 1; 
    scrollPause = true; 
    } 

    //scroll down 
    if (e.wheelDelta > 0) { 
    pane -= 1; 
    scrollPause = true; 
    } 

    //reset scrollPause 
    setTimeout(function(){ scrollPause = false; },2000); 

    //log pane number 
    console.log(pane); 
} 


//scroll event listener 
window.onmousewheel = function(e){ requestAnimFrame(scrolling(e)); } 

現在這樣做實際工作,但在setTimeout的時期,控制檯反覆記錄以下錯誤:

Uncaught TypeError: Failed to execute 'requestAnimationFrame' on 'Window': The callback provided as parameter 1 is not a function. 

這是使用了不正確的方式requestAnimationFrame?有沒有更有效的方法來做到這一點?爲什麼我得到這個錯誤?

回答

0

我想你應該有這樣的呼喚 -

window.onmousewheel = function(e) { requestAnimFrame(scrolling); } 
+0

是的,這擺脫了錯誤,但隨後e.wheelDelta因爲我沒有通過的情況下返回我的滾動功能定義。 – Coop 2014-11-05 13:19:07

+0

函數window.requestAnimationFrame接受它使用某個時間戳而不是事件調用的回調函數。您可能必須更改實施。檢查https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame – jaibatrik 2014-11-05 18:53:08