jquery mousewheel: rilevare quando la ruota si ferma?

Sto usando il plugin per jouser Mousewheel e mi piacerebbe essere in grado di rilevare quando l’utente ha finito di usare la ruota. Funzionalità simile alla fermata: evento nella roba trascinabile. Qualcuno può indicarmi la giusta direzione?

Non c’è un evento “stop” qui – ottieni un evento quando scorri, quindi ogni volta che si verifica un evento della ruota del mouse, l’evento viene triggersto … quando non c’è niente non ottieni eventi e il tuo gestore non scatterà.

Tuttavia, è ansible rilevare quando l’utente non lo ha usato in dire 250ms, in questo modo:

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

Puoi fare un tentativo qui , tutto quello che stiamo facendo è archiviare il timeout per ciascun utilizzo nell’uso di $.data() , se lo usi ancora prima che scada il tempo, viene cancellato … se non poi qualsiasi codice volevi lanciare incendi, l’utente ha “finito” usando la rotellina del mouse per il periodo di tempo per il quale stai provando.

Per completare la risposta di Nick 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); }); 

uscite a scorrimento:

 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! 

Ecco come implementare il proprio evento di fermo ruota.

 //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; 

crea un nuovo eventListener per l’evento wheelstop

che chiameremo dal normalWheelEventCallbackFunction ()

 var wheelstop = new Event("wheelstop"); 

successivamente definiremo il callback nel caso in cui questo evento venga inviato e quindi aggiungiamo l’evento all’object window.

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

ora definiamo il normale listener di eventi wheel e definiamo il callback che questo listener utilizzerà …

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

La funzione di richiamata degli eventi delle ruote

 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; } 

questo può avere alcuni errori, ma per la maggior parte la logica è piuttosto valida, tuttavia raccomanderei una ripiego se ti viene richiesto di catturare ogni singolo evento di ruota inviato poiché potrebbe averne un po ‘dopo che è stato inviato l’evento “wheelstop”.

oh e, infine, sii sicuro e attua un gestore per se è interrotto dall’evento click che termina di conseguenza l’evento ruota …

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

Ecco come farlo in JavaScript nativo:

 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 

La risposta di Nick Craver funziona bene. Ma causerà un piccolo ritardo (di 250 ms) per eseguire // do something . Un’opzione migliore sarebbe quella di eseguire i codici subito e attendere il delay ms prima di prendere altri eventi.

Per fare ciò, utilizzare una variabile globale per dire processing , inizializzarla con false e commutare il suo valore prima e dopo l’esecuzione del codice.

 window.processing = false; $("#myElem").mousewheel(function() { if (processing === false) { processing = true; // do something setTimeout(function() { processing = false; }, 250)); // waiting 250ms to change back to false. } });