Jquery, annullando l'evento della rotellina del mouse, quindi riavvolgendolo dopo che le azioni sono state completate?

Question

Ho sofferto con questo per un po 'di tempo .. Sto usando questo codice per monitorare la rotellina del mouse in modo che possa essere utilizzato per lo scorrimento con un cursore che ho .. tuttavia, ha un problema dove le azioni in coda così se si scorre con la rotellina del mouse veloce (come chiunque farebbe normalmente) si accumulano e causa un comportamento bacato. So di gestire questo tipo di problema con l'animazione, ma non con un monitor rotellina del mouse ..

I vuoi fare qualcosa come separare la rotellina del mouse all'inizio dell'azione (in questo caso, per far scorrere la barra di scorrimento dopo che la rotellina del mouse viene spostata), quindi ricollegarla, quindi se l'utente esegue troppe rotazioni troppo velocemente, ignora fino allo scorrimento iniziale è completato .. Ho provato il codice qui sotto ma non è riconfermato quindi non sono sicuro di cosa sto facendo male, ogni consiglio è apprezzato.

 $("#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

avete bisogno di memorizzare la funzione fosse è possibile farvi riferimento, in questo modo:

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

In questo modo si può chiamare .bind() più tardi per la stessa funzione (non è possibile fare riferimento a un unico anonimo). Attualmente stai cercando di chiamare .bind()senza una funzione per gestire qualsiasi cosa, che non funziona. Questo ha anche il vantaggio di essere in grado di passare lo stesso riferimento di funzione a .unbind() in modo da separare solo gestore, non qualsiasi gestoremousewheel.

---

In alternativa, fare questo senza UN/re-binding, in questo modo:

$("#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); 
}); 

Questo utilizza solo $.data() per memorizzare una voce di dati "stiamo lavorando" con l'elemento, se qualsiasi cosa colpisce questo gestore mentre è vero, restituisce e ignora l'evento.

Answer 2

In questa situazione ci sono molti vincoli/rilasci inutili, che sono più difficili e più inefficienti di quanto non debbano essere. L'unbinding è ottimo per liberare risorse quando un'azione non è più necessaria o non sarà necessaria per un po '; ma per una frazione di secondo di non volere che il tuo codice esegua unbinding/rebinding è un bel po 'di overhead, basta usare una variabile per determinare se onorare la rotellina del mouse o meno, e basta abilitarla vero e falso secondo necessità. Probabilmente non è necessario utilizzare i dati jquery, solo una var più rapida definita al di fuori della funzione.

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

anche se onestamente la logica di disabilitare la barra di scorrimento solo quando le linee di coppia di cui sopra processi è un po 'viziata, si musta stato un programmatore che si occupava di lingue multithreading un sacco :) In js non è nemmeno possibile per un altro evento a fuoco nel bel mezzo di linee di una funzione di codice, in modo da assumere si preferisce spegnerlo per un periodo di tempo (e che sarebbe applicabile se si utilizza una variabile o legare/unbind):

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