With kind permission from Paul Irish.
-------------------------------------------------------------------------------- /jquery.throttledresize.js: -------------------------------------------------------------------------------- 1 | /* 2 | * throttledresize: special jQuery event that happens at a reduced rate compared to "resize" 3 | * 4 | * latest version and complete README available on Github: 5 | * https://github.com/louisremi/jquery-smartresize 6 | * 7 | * Copyright 2012 @louis_remi 8 | * Licensed under the MIT license. 9 | * 10 | * This saved you an hour of work? 11 | * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON 12 | */ 13 | (function($) { 14 | 15 | var $event = $.event, 16 | $special, 17 | dummy = {_:0}, 18 | frame = 0, 19 | wasResized, animRunning; 20 | 21 | $special = $event.special.throttledresize = { 22 | setup: function() { 23 | $( this ).on( "resize", $special.handler ); 24 | }, 25 | teardown: function() { 26 | $( this ).off( "resize", $special.handler ); 27 | }, 28 | handler: function( event, execAsap ) { 29 | // Save the context 30 | var context = this, 31 | args = arguments; 32 | 33 | wasResized = true; 34 | 35 | if ( !animRunning ) { 36 | setInterval(function(){ 37 | frame++; 38 | 39 | if ( frame > $special.threshold && wasResized || execAsap ) { 40 | // set correct event type 41 | event.type = "throttledresize"; 42 | $event.dispatch.apply( context, args ); 43 | wasResized = false; 44 | frame = 0; 45 | } 46 | if ( frame > 9 ) { 47 | $(dummy).stop(); 48 | animRunning = false; 49 | frame = 0; 50 | } 51 | }, 30); 52 | animRunning = true; 53 | } 54 | }, 55 | threshold: 0 56 | }; 57 | 58 | })(jQuery); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Debounced and Throttled Resize Events for jQuery 2 | ================================================ 3 | 4 | It has always been a pain to deal with cross browser issues of the `window`'s resize event: 5 | 6 | * in IE, many resize events fire as long as the user continues resizing the window, 7 | * Chrome an Safari behave like IE, but resize events always fire two by two, 8 | * Firefox used to fire one resize event at the end of the resizing, but now behaves like IE, 9 | * Opera behaves like IE, but fires resize events at a reduced rate. 10 | 11 | This project offers two scripts, each providing a special jQuery event that make `resize` more manageable: 12 | 13 | * **jquery.debouncedresize.js**: adds a special event that fires once after the window has been resized, 14 | * **jquery.throttledresize.js**: adds a special event that fires at a reduced rate (no more double events from Chrome and Safari). 15 | 16 | The [Demo](http://louisremi.github.com/jquery-smartresize/demo/index.html) should help you make your choice. 17 | 18 | **Note to previous users**: jquery.debouncedresize.js is the equivalent of the old jquery.smartresize.js, only the name of the special event changes. 19 | Update is not required unless you want to add jquery.throttledresize.js to a page page that already has jquery.smartresize.js. 20 | 21 | Binding / Unbinding 22 | ------------------- 23 | 24 | Simply bind your special event just like a normal resize event. 25 | 26 | $(window).on("debouncedresize", function( event ) { 27 | // Your event handler code goes here. 28 | }); 29 | 30 | // or... 31 | $(window).on("throttledresize", function( event ) { 32 | // Your event handler code goes here. 33 | }); 34 | 35 | // unbind at will 36 | $(window).off( "debouncedresize" ); 37 | 38 | Threshold 39 | --------- 40 | 41 | Both special events have a `.threshold` option: 42 | 43 | * in jquery.debouncedresize.js, it defines the interval used to determine if two `resize` events are part of the same `debouncedresize` event. **Defaults to 150 (milliseconds)** 44 | * in jquery.throttledresize.js, it defines the number of animation ticks (or frames) between each `throttledresize` event. **Defaults to 0 (tick)**, which means that it's going to fire at a maximum of 60fps. 45 | 46 | They can be modified globally once the script has been loaded: 47 | 48 | // increase the threshold to 250ms 49 | $.event.special.debouncedresize.threshold = 250; 50 | 51 | // decrease the firing rate to a maximum of 30fps 52 | $.event.special.throttledresize.threshold = 1; 53 | // 2 <=> 20fps, 3 <=> 15fps, ... 54 | 55 | (Synchronous) Trigger 56 | --------------------- 57 | 58 | Triggering those events is achieved using jQuery's standard API: 59 | 60 | $(window).trigger( "debouncedresize" ); 61 | 62 | It's also possible to execute the handler of any listener synchronously (without the delays): 63 | 64 | $(window).trigger( "throttledresize", [true] ); 65 | 66 | Minimalist Standalone Version 67 | ============================= 68 | 69 | Most of the time, I find myself using `debouncedresize` just to register a single listener on `window`. 70 | As it turns out, all the features I need actually fit in 91 bytes: 71 | 72 | // debulked onresize handler 73 | function on_resize(c,t){onresize=function(){clearTimeout(t);t=setTimeout(c,100)};return c}; 74 | 75 | Using it is pretty simple: 76 | 77 | on_resize(function() { 78 | // handle the resize event here 79 | ... 80 | }); 81 | 82 | Initializing a page (by executing the resize handler when the page loads) couldn't be easier: 83 | 84 | on_resize(function() { 85 | ... 86 | })(); // these parenthesis does the trick 87 | 88 | No files are provided for this function, simply copy/paste it from this README. 89 | 90 | License 91 | ======= 92 | 93 | MIT licensed http://louisremi.mit-license.org/ 94 | 95 | Copyright (c) 2012 [Louis-Rémi Babé](http://twitter.com/louis_remi). -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |debouncedresize and throttledresize special jQuery events