2013-09-27 31 views
7

Sto utilizzando il plug-in jquery-mousewheel per attivare una funzione.Staccare e riattaccare il listener di eventi della rotellina di mouse non ripristinare l'inerzia dello scorrimento

Quando chiamo moveit Scollego il listener e attendo che l'animazione sia completata, quindi ricollego il listener.

Il problema è che quando lo ricollego, il plugin della rotellina del mouse sta ancora ascoltando l'inerzia di alcuni mouse/trackpad e chiama lo moveit ripetutamente.

Credo che debouncing o strozzamento la chiamata di funzione non sono buone soluzioni nel mio caso specifico, perché l'inerzia è ancora lì, e voglio anche all'ascoltatore di essere attaccato immediatamente per altri possibili moveit chiamate.

C'è un modo per "uccidere l'inerzia" resettando completamente l'evento della rotellina del mouse, invece di staccarlo solo?

$(document).ready(function() { 

    var tween; 
    var slide = $('#slide'); 

    function bodyListen() { 
     $('body').on('mousewheel.bodyscroll', 
     function (e, delta, deltaX, deltaY) { 
      e.preventDefault(); 
      $('body').off('mousewheel.bodyscroll'); 
      moveit(); 
     }); 
    } 

    function moveit() { 
     tween = TweenMax.to(slide, 0.8, { 
      marginLeft: 300, 
      onComplete: bodyListen 
     }); 
    } 

    bodyListen(); 
}); 
+0

Sei arrivato da qualche parte con questo? – iamdarrenhall

+0

@dazhall purtroppo ho dovuto adottare una soluzione alternativa, come fanno tutti. Ho semplicemente ritardato il riaggancio dell'ascoltatore della rotellina della ruota :( – Luke

+0

Perché non aggiungere solo un flag globale invece di staccare il listener di eventi? Se il flag è attivo, il listener non fa nulla, altrimenti fa quello che deve. –

risposta

4

Utilizzare bandiere quando si tratta di eventi (o qualsiasi manipolazione relativa al DOM), Allucinante listener di eventi possono spesso si comportano come funzioni asincroni.

$(document).ready(function() { 

    var tween; 
    var slide = $('#slide'); 
    var flag = true; 

    function bodyListen() { 
     $('body').on('mousewheel.bodyscroll', 
     function (e, delta, deltaX, deltaY) { 
      if(flag){ 
       e.preventDefault(); 
       flag = false; 
       moveit(); 
      } 
     }); 
    } 

    function moveit() { 
     tween = TweenMax.to(slide, 0.8, { 
      marginLeft: 300, 
      onComplete: function(){ 
       flag = true; 
      } 
     }); 
    } 

    bodyListen(); 
}); 
0

Anche se non ho provato io stesso, TweenMax ha Kill Tweens of e KillAll che permettono di uccidere un'interpolazione ed eventualmente completarle prima di te. forse non è quello che vuoi, perché forzerebbe l'animazione a finire ma ti riporta allo stato che desideri e il codice inserito è semplice. All'inizio della funzione bodyListen

function bodyListen() { 
    if(tween) tween.killAll(true) 
    .....