Menu icon Foundation
Throttle & Debounce vs mousemove

Dear Zurb,

I was looking forward to implementing Foundation-native Throttle and Debounce javascripts, after using a 3rd party plugin for a while. However, it seems none of the two callback delays work properly, at least not with mouseMove.

Basically I wanted to throttle callbacks from mouseMove just because it doesnt have to fire as often as it does by default. When throttling mouseMove, the callback should fire at the set interval when moving mouse, but it doesnt ... Instead it fires only **after** you stop mouse movement. Furthermore, I think there should be an **'immediate'** option for throttle, just like there is for debounce ... When I throttle the mouseMove callback, I want to trigger it first time at the beginning of the delay ...

I tried debounce also, and although this can trigger the event immediately, it does not fire within the set interval in a single mouse motion (which is guess is correct behavior with debounce?).

Here is an example I made on codepen:
http://codepen.io/mjau-mjau/pen/zugFG/
Try moving the mouse around for a period of time, and you will see that the events do not trigger at the set delay. Instead, they trigger either before or after the mouse motion stops.

This is how it should work, as with the jQuery Throttle-Debounce plugin:
http://codepen.io/mjau-mjau/pen/IEfjL

javascript utilitiesthrottledebouncemousemove

Dear Zurb,

I was looking forward to implementing Foundation-native Throttle and Debounce javascripts, after using a 3rd party plugin for a while. However, it seems none of the two callback delays work properly, at least not with mouseMove.

Basically I wanted to throttle callbacks from mouseMove just because it doesnt have to fire as often as it does by default. When throttling mouseMove, the callback should fire at the set interval when moving mouse, but it doesnt ... Instead it fires only **after** you stop mouse movement. Furthermore, I think there should be an **'immediate'** option for throttle, just like there is for debounce ... When I throttle the mouseMove callback, I want to trigger it first time at the beginning of the delay ...

I tried debounce also, and although this can trigger the event immediately, it does not fire within the set interval in a single mouse motion (which is guess is correct behavior with debounce?).

Here is an example I made on codepen:
http://codepen.io/mjau-mjau/pen/zugFG/
Try moving the mouse around for a period of time, and you will see that the events do not trigger at the set delay. Instead, they trigger either before or after the mouse motion stops.

This is how it should work, as with the jQuery Throttle-Debounce plugin:
http://codepen.io/mjau-mjau/pen/IEfjL