jquery mousewheel：檢測輪子何時停止？

Question

我正在使用Jquery mousewheel插件，我希望能夠檢測用戶何時完成使用輪子。 與可拖動內容中的stop：event類似的功能。 有人能指點我正確的方向嗎？

Answer 1

這裏有沒有「停止」事件真的 - 你會得到一個事件時，你做滾動，所以每一次鼠標滾輪事件發生的事件觸發...當沒有什麼，你會得到任何事件，您的處理程序將不會被解僱。

當用戶尚未使用過它說250毫秒您CA但是檢測，像這樣：

$("#myElem").mousewheel(function() { 
    clearTimeout($.data(this, 'timer')); 
    $.data(this, 'timer', setTimeout(function() { 
    alert("Haven't scrolled in 250ms!"); 
    //do something 
    }, 250)); 
}); 

You can give it a try here，所有我們正在做的是，存儲在每次使用超時使用$.data()如果您在時間用完之前再次使用它，它會被清除......如果沒有，那麼無論您想要運行什麼代碼，用戶都會在您測試的任何時間段內「完成」使用鼠標滾輪。

Answer 2

要完成尼克Craver的回答是：

var wheeldelta = { 
    x: 0, 
    y: 0 
}; 
var wheeling; 
$('#foo').on('mousewheel', function (e) { 
    if (!wheeling) { 
    console.log('start wheeling!'); 
    } 

    clearTimeout(wheeling); 
    wheeling = setTimeout(function() { 
    console.log('stop wheeling!'); 
    wheeling = undefined; 

    // reset wheeldelta 
    wheeldelta.x = 0; 
    wheeldelta.y = 0; 
    }, 250); 

    wheeldelta.x += e.deltaFactor * e.deltaX; 
    wheeldelta.y += e.deltaFactor * e.deltaY; 
    console.log(wheeldelta); 
}); 

滾動輸出：

start wheeling! 
Object {x: -1, y: 0} 
Object {x: -36, y: 12} 
Object {x: -45, y: 12} 
Object {x: -63, y: 12} 
Object {x: -72, y: 12} 
Object {x: -80, y: 12} 
Object {x: -89, y: 12} 
Object {x: -97, y: 12} 
Object {x: -104, y: 12} 
Object {x: -111, y: 12} 
Object {x: -117, y: 12} 
Object {x: -122, y: 12} 
Object {x: -127, y: 12} 
Object {x: -131, y: 12} 
Object {x: -135, y: 12} 
Object {x: -139, y: 12} 
Object {x: -145, y: 12} 
Object {x: -148, y: 12} 
Object {x: -152, y: 12} 
Object {x: -154, y: 12} 
Object {x: -156, y: 12} 
Object {x: -157, y: 12} 
Object {x: -158, y: 12} 
Object {x: -159, y: 12} 
Object {x: -161, y: 12} 
Object {x: -162, y: 12} 
Object {x: -164, y: 12} 
Object {x: -166, y: 12} 
Object {x: -167, y: 12} 
Object {x: -169, y: 12} 
stop wheeling! 

Answer 3

這裏是如何做到這一點在本地JavaScript：

var _scrollTimeout = null; 

function onMouseWheel() { 
    var d = ((typeof e.wheelDelta != "undefined") ? (-e.wheelDelta) : e.detail); 
    d = 100 * ((d>0)?1:-1); 

    console.log("Scroll delta", d); 

    clearTimeout(_scrollTimeout); 
    _scrollTimeout = setTimeout(function() { 
     console.log("Haven't scrolled in 250ms"); 
    }, 250); 
} 

window.addEventListener('mousewheel', onMouseWheel, false); 
window.addEventListener('DOMMouseScroll', onMouseWheel, false); // firefox 

Answer 4

以下是如何實現自己的車輪停止活動。

//initialise the new variables 
var wheelMap = new Map; 
var deltaXEnded = false; 
var deltaYEnded = false; 
var previousSwipe = Object; 
    previousSwipe.timeStamp = 0; 
    previousSwipe.deltaX = 0; 
    previousSwipe.deltaY = 0; 
var wheelstart = false; 

作出新的事件監聽的wheelstop事件

，我們將從normalWheelEventCallbackFunction（）調用被

var wheelstop = new Event("wheelstop"); 

接下來我們將定義該事件被調度的情況下的回調&然後將事件添加到窗口對象。

function wheelstopcallback(event){ 
    wheelstart = false; 
    console.log("wheel event has ended"); 
} 
window.addEventListener("wheelstop", wheelstopcallback.bind(this)); 

現在我們定義的正常輪事件偵聽器，以及定義這個監聽器將使用回調...

window.addEventListener("wheel", normalWheelEventCallbackFunction.bind(this)); 

輪子事件回調函數

function normalWheelEventCallbackFunction(event){ 
    if(previousSwipe.timeStamp !== 0){ 
     if(event.timeStamp - previousSwipe.timeStamp < 1000) 
     wheelMap.set(event.timeStamp, event); 
     else 
     wheelMap.clear(); 
    } 
else{previousSwipe.timeStamp = event.timeStamp;} 


    if(event.deltaX > 2 && event.deltaX > previousSwipe.deltaX){ 
    //forward 
    wheelstart = true 
    } 
    else if(event.deltaX < -2&& event.deltaX < previousSwipe.deltaX){ 
    //backward 
    wheelstart = true; 
    } 
    else if(event.deltaY > 2 && event.deltaY > previousSwipe.deltaY){ 
    wheelstart = true; 
    } 
    else if(event.deltaY < 2 && event.deltaY < previousSwipe.deltaY){ 
    wheelstart = true; 
    } 

    if(
    ((event.deltaX === 1 || event.deltaX === 0 || event.deltaX === -1) && ((event.deltaX > 0 && event.deltaX < previousSwipe.deltaX) || (event.deltaX < 0 && event.deltaX > previousSwipe.deltaX)) && wheelstart) 
    || (wheelstart && (event.deltaX === 0 && previousSwipe.deltaX === 0)) 
) 
    { 
    deltaXEnded = true; 
    console.log("deltaXEnded"); 
    } 
    if(
    (((event.deltaY === 1 || event.deltaY === 0 || event.deltaY === -1) && ((event.deltaY > 0 && event.deltaY < previousSwipe.deltaY) || (event.deltaY < 0 && event.deltaY > previousSwipe.deltaY))) && wheelstart) 
    || (wheelstart && (event.deltaY === 0 && previousSwipe.deltaY === 0)))  { 
     deltaYEnded = true; 
     console.log("deltaYEnded"); 
    } 

    if(deltaXEnded && deltaYEnded){ 
     deltaXEnded = false; 
     deltaYEnded = false; 
     window.dispatchEvent(wheelstop); 
    } 

    previousSwipe.deltaX = event.deltaX; 
    previousSwipe.deltaY = event.deltaY; 
} 

這可能有一些錯誤，但在大多數情況下的邏輯是相當完善的，我會但是如果推薦一個備用您必須捕捉每個輪子事件，因爲它可能會在'wheelstop'事件發出後發生。

哦，最後一定和它是否是由從而結束輪事件的點擊事件中斷執行的處理程序...

function wheelstopdispatch(){ 
    if(wheelstart) 
    window.dispatchEvent(wheelstop); 
    } 
window.addEventListener("click", wheelstopdispatch);