/ >

ThrottlableJS

A simple scroll throttle, as part of my AbleJS jQuery plugin library.

ThrottlableJS

How it works

Throttlable is a scroll throttle. It is usually attached to the window and then provides a capability for all other scripts on the site to attached their scroll event handlers to "scroll_throttle" instead of "scroll". An unthrottled scroll will fire rapidly when a user scrolls the page and will often lead to lag because of the shear number of times an event handler will fire. Throttlable reduces the risk of this issue by reducing the number of times a scroll event is fired.

Browsers also calculate when to trigger a scroll event differently. Firefox for example, triggers the event less frequently than Chrome. Throttlable will also standardise when a scroll event is triggered.

The frequency of the custom event is customisable, and determined by the number of pixels that are scrolled before the event fires again. And in case a scroll is missed because a user stops scrolling before the throttle triggers, there is a timer which will capture any trailing scrolls to sweep up after.

Initialisation

Initialisation is through jQuery only and should be run on the window object.

$(window).throttle([settings]);

The jQuery method returns jQuery, so other jQuery methods can be chained after it if required. It also accepts a settings object.

For example:

$(window).throttle({
    throttle: 50,
    throttleevent: "scroll_throttle",
    chokeevent: "scroll_choke"
});

Customisable Settings

number throttle

Default: 5

The number of pixel to scroll in between triggering throttled events.

string throttleevent

Default: "scroll_throttle"

The name of the custom event triggered instead of a scroll event. Any event handlers would need to be bound to this instead of "scroll".

string chokeevent

Default: "scroll_choke"

The name of the custom event triggered when the scroll event is suppressed again.

number failsafe

Default: 200

The number of milliseconds to wait if a throttle is not triggered after a scroll event. Note, if this is set too low, the throttle will have little effect on efficiency of the page. The default is considered the minimum delay.

Other Resources:

Comments

Post your own

There's no more content down here, what's with the crazy scrolling...