Jquery, desvincular el evento de la rueda del mouse y volver a vincularlo después de que se completen las acciones?

Question

He estado luchando con esto por un tiempo. Estoy usando este código para monitorear la rueda del mouse para que pueda usarse para desplazarse con un control deslizante que tengo ... sin embargo, tiene un problema donde las acciones hacen cola así que si se desplaza rápidamente con la rueda del mouse (como cualquiera haría normalmente) se acumulan y causa un comportamiento defectuoso ... Sé manejar este tipo de problema con la animación, pero no con un monitor de rueda de ratón ...

I desea hacer algo como desenganchar la rueda del mouse al inicio de la acción (en este caso, para desplazar la barra de desplazamiento después de mover la rueda del mouse) y volver a enlazar después, así que si el usuario hace demasiados desplazamientos demasiado rápido, solo ignora el desplazamiento inicial se completó .. Probé el código a continuación, pero no se vuelve a vincular, así que no estoy seguro de lo que estoy haciendo mal, cualquier consejo es apreciado.

 $("#wavetextcontainer").bind("mousewheel", function(event, delta) { 

    //HERE IS WHERE EVENT IS UNBOUND: 
    $("#wavetextcontainer").unbind("mousewheel"); 

     var speed = 10; 
     var mySlider = $("#slider"); 
     var sliderVal = mySlider.slider("option", "value"); 

     sliderVal += (delta*speed); 

     if (sliderVal > mySlider.slider("option", "max")) sliderVal = mySlider.slider("option", "max"); 
     else if (sliderVal < mySlider.slider("option", "min")) sliderVal = mySlider.slider("option", "min"); 

     $("#slider").slider("value", sliderVal); 

     event.preventDefault(); 

     // HERE I WANT TO REBIND THE EVENT: 
    $("#wavetextcontainer").bind("mousewheel"); 

}); 

Answer 1

necesita almacenar la función estabas puede hacer referencia a ella, como esto:

function myHandler(event, delta) { 
    $("#wavetextcontainer").unbind("mousewheel", myHandler); 

     var speed = 10; 
     var mySlider = $("#slider"); 
     var sliderVal = mySlider.slider("option", "value"); 

     sliderVal += (delta*speed); 

     if (sliderVal > mySlider.slider("option", "max")) sliderVal = mySlider.slider("option", "max"); 
     else if (sliderVal < mySlider.slider("option", "min")) sliderVal = mySlider.slider("option", "min"); 

     $("#slider").slider("value", sliderVal); 

     event.preventDefault(); 

     // HERE I WANT TO REBIND THE EVENT: 
    $("#wavetextcontainer").bind("mousewheel", myHandler);  
}; 

$("#wavetextcontainer").bind("mousewheel", myHandler); 

De esta manera se puede llamar .bind() más tarde a la misma función (no se puede hacer referencia a un anónimo) Actualmente está tratando de llamar al .bind()sin una función para manejar cualquier cosa, lo que no funciona. Esto también tiene la ventaja adicional de poder pasar la misma referencia de función a .unbind() por lo que desvincula solo ese controlador, no cualquier controladormousewheel.

---

Alternativamente, hacer esto sin un/re-unión, así:

$("#wavetextcontainer").bind("mousewheel", function (event, delta) { 
    event.preventDefault(); 
    if($.data(this, 'processing')) return; //we're processing, ignore event 

    $.data(this, 'processing', true); 
    var speed = 10; 
    var mySlider = $("#slider"); 
    var sliderVal = mySlider.slider("option", "value"); 

    sliderVal += (delta*speed); 

    if (sliderVal > mySlider.slider("option", "max")) sliderVal = mySlider.slider("option", "max"); 
    else if (sliderVal < mySlider.slider("option", "min")) sliderVal = mySlider.slider("option", "min"); 

    $("#slider").slider("value", sliderVal); 
    $.data(this, 'processing', false); 
}); 

Esto se utiliza para almacenar $.data() una entrada de datos "estamos trabajando" con el elemento, si cualquier cosa golpea este controlador mientras es verdad, simplemente regresa e ignora el evento.

Answer 2

En esta situación, es una gran cantidad de enlace/desvinculación innecesario, que es más difícil y más ineficiente de lo que debe ser. La desvinculación es excelente para liberar recursos cuando ya no se necesita una acción o no será necesaria por un tiempo; pero por una fracción de segundo de no querer que se ejecute el código, la desvinculación/reenlace es una gran cantidad de sobrecarga, solo use una variable para determinar si se debe respetar o no la rueda del mouse, y simplemente alternar entre verdadero y falso según sea necesario. Probablemente no sea necesario utilizar datos jquery, solo una var más rápida definida fuera de la función.

var doMouseWheel = true; 
$("#wavetextcontainer").bind("mousewheel", function(event, delta) 
{ 
     // it'll just not do anything while it's false 
     if (!doMouseWheel) 
      return; 

     // here's where you were unbinding, now just turning false 
     doMouseWheel = false; 

     // do whatever else you wanted 

     // here's where you were rebinding, now just turn true 
     doMouseWheel = true; 
}); 

aunque honestamente la lógica de la desactivación de la barra de desplazamiento sólo cuando las líneas pares sobre los procesos es un poco deficiente, que seria como de un programador que se ocupa de idiomas multithreading mucho :) En js que ni siquiera es posible que otro evento al fuego en medio de las líneas de una función de código, así que supongo que prefieres lo apague durante un periodo de tiempo (y que se aplicaría si se utiliza una variable o atar/desatar):

var doMouseWheel = true; 
$("#wavetextcontainer").bind("mousewheel", function(event, delta) 
{ 
     // it'll just not do anything while it's false 
     if (!doMouseWheel) 
      return; 

     // here's where you were unbinding, now just turning false 
     doMouseWheel = false; 

     // do whatever else you wanted 

     // here's where you were rebinding, now wait 200ms and turn on 
     setTimeout(turnWheelBackOn, 200); 
}); 

function turnWheelBackOn() { doMouseWheel = true; }