jquery колесико мыши: обнаружение, когда колесо останавливается?

Question

Я использую плагин Jquery mousewheel , и я хотел бы иметь возможность определять, когда пользователь закончил использовать колесо. Функциональность, аналогичная остановке: событие в перетаскиваемом материале. Может ли кто-нибудь указать мне правильное направление?

Answer 1

Здесь на самом деле нет события «стоп» - вы получаете событие, когда вы делаете прокрутку, поэтому каждый раз, когда происходит событие колесика мыши, событие срабатывает ... когда нет ничего, вы не получаете никаких событийи ваш обработчик не будет запускать.

Однако вы можете определить, когда пользователь не использовал его, скажем, за 250 мс, например:

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

Вы можете дать егопопробуйте здесь , все, что мы делаем, это храним тайм-аут при каждом использовании с использованием $.data(), если вы используете его снова до истечения этого времени, оно очищается ... если нетзатем любой код, который вы хотели запустить, пользователь «закончил», используя колесо мыши за любой период времени, на который вы тестируете.

Answer 2

Для завершения ответа Ника Крейвера:

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;

создайте новый eventListener для события wheeltop

, которое мыбудет вызываться из 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;
}

в этом может быть несколько ошибок, но по большей части логика довольно хорошая, я бы порекомендовалтем не менее, если вам необходимо перехватить каждое отправленное событие колеса, так как оно может иметь место после отправки события 'wheeltop'.

о, и, наконец, убедитесь, что реализовали обработчик, если он прерываетсясобытие кликаch, следовательно, завершает событие колеса ...

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

Answer 5

Ник Крэйвер ответ отлично работает. Но это приведет к небольшой задержке (250 мс) для выполнения // do something. Лучшим вариантом было бы выполнить ваши коды сразу и подождать delay мс, прежде чем перехватывать дальнейшие события.

Для этого используйте глобальную переменную, скажем processing, инициализируйте ее с false и переключайте ее значение до и после выполнения кода.

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