Disconnect and reconnect event listener in "mousewheel" mode do not reset scroll inertia

I am using jquery-mousewheel plugin to run a function.

When I call moveit, I disconnect the listener and wait until the animation is complete, then I reconnect the listener.

The problem is that when I reattach it, the mousewheel plugin still listens to the inertia of some mice / trackpads and repeatedly calls moveit.

I think that debouncing or throttling function calls are not good solutions in my particular case, because inertia still exists, and I also want the listener to be immediately connected to other possible moveit calls.

Is there a way to "kill inertia" by completely resetting the mouse event, instead of separating it?

$(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(); }); 
+7
javascript jquery mousewheel mouseevent
source share
2 answers

Use flags when working with events (or with any manipulations related to the DOM), beacuse event listener can often behave as asynchronous functions.

 $(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(); }); 
+4
source share

Although I have not tried it myself, TweenMax β€œKill Teens” and KillAll , which allow you to kill the animation and possibly complete it before you do it. maybe not what you want, because it will make the animation finish, but it will return you to the state you want, and pasting the code is simple. At the beginning of the bodyListen function

 function bodyListen() { if(tween) tween.killAll(true) ..... 
0
source share

All Articles