throttledresize


throttledresize eventversion added: 1.0

Description: Limits the rate of the execution of handlers on resize events.

  • jQuery( ".selector" ).on( "throttledresize", function( event ) { ... } )

The jQuery Mobile throttledresize event is a special event that prevents browsers from running continuous callbacks on resize. throttledresize is used internally for orientationchange in browsers like Internet Explorer. throttledresize ensures that a held event will execute after the timeout so logic that depends on the final conditions after a resize is complete will still execute properly.

The throttledresize event is triggered if orientationchange is not natively supported.

This event triggers when the browser window resizes from:

  1. an orientation change (orientation-enabled device);
  2. changes in dimension ratio that replicates a landspace/portrait change (resizing a desktop browser).

This plugin extends jQuery's built-in method. If jQuery UI is not loaded, calling the .throttledresize() method may not fail directly, as the method still exists. However, the expected behavior will not occur.

1
2
3
4
5
6
7
8
9
10
11
12
13
var count = 0;
$(function() {
// Bind an event handler to window throttledresize event that, when triggered,
// passes a reference of itself that is accessible by the callback function.
$( window ).on( "throttledresize", throttledresizeHandler );
function throttledresizeHandler( event ) {
$( "#output-text" ).html( "Event Count: " + ++count );
}
// You can also manually force this event to fire.
$( window ).trigger( "throttledresize" );
});

Visit this from your orientation-enabled device to see it in action!