74 |
bindWithDelay jQuery Plugin (see example)
75 |
The Basics
76 |
77 | - What does bindWithDelay do?
78 | It prevents a function call from happening EVERY time an event is fired from the browser.
79 | Rather than implementing custom timeout code, just add in this plugin and simplify your code.
80 |
81 | - How do I use it in code?
82 |
Pretty much the same as http://api.jquery.com/bind/
83 | element.bindWithDelay( eventType, [ eventData ], handler(eventObject), timeout, throttle )
84 | It works with existing code that uses the bind() function.
85 | Just add an extra parameter (timeout in milliseconds), and an optional boolean value if you would like to enable throttling.
86 | // If your code that uses bind(), just add in a timeout parameter.
87 | $("#element").bind("click", function() {...});
88 | $("#element").bindWithDelay("click", function() {...}, 1000);
89 |
90 | // If your code that uses click(), you will need to do it the same way.
91 | $("#element").click(function() {...}, 1000);
92 | $("#element").bindWithDelay("click", function() {...}, 1000);
93 |
94 | // If you would like to let it still fire once per interval while an event is fired
95 | // (called "throttling"), then put a true in for the throttle parameter:
96 | $("#element").bindWithDelay("click", function() {...}, 1000, true);
97 |
98 |
99 |
100 | - Where is the source code?
101 | http://github.com/bgrins/bindWithDelay/blob/master/bindWithDelay.js
102 |
103 |
104 |
What is the difference between throttling and not?
105 |
Imagine you are scrolling down a long page for 3 seconds and you have bindWithDelay running with a timeout of 1000ms. By default, your event will only fire a second after you have completely finished scrolling. If you have the optional throttling on, it will fire once per second during the scrolling - a total of 3 times instead of 1. Move your mouse around in circles and look at the example below to see:
106 |
107 |
A Simple Example
108 |
As you have been on this page, it has been tracking how many times your browser's mousemove, click,
109 | scroll, and resize events have fired (both with and without bindWithDelay).
110 | Go ahead and move your mouse around and click (try clicking a bunch of times in a row to see what it does)
111 | , or resize your browser to get a look at how it works.
112 |
113 |
114 |
$(document).bind("mousemove") has been called: 0 times.
115 |
$(document).bindWithDelay("mousemove", 1000) has been called: 0 times.
116 |
$(document).bindWithDelay("mousemove", 1000, true) has been called: 0 times.
117 |
118 |
119 |
$(document).bind("click") has been called: 0 times.
120 |
$(document).bindWithDelay("click", 1000) has been called: 0 times.
121 |
$(document).bindWithDelay("click", 1000, true) has been called: 0 times.
122 |
123 |
124 |
$(document).bind("scroll") has been called: 0 times.
125 |
$(document).bindWithDelay("scroll", 1000) has been called: 0 times.
126 |
$(document).bindWithDelay("scroll", 1000, true) has been called: 0 times.
127 |
128 |
129 |
$(window).bind("resize") has been called: 0 times.
130 |
$(window).bindWithDelay("resize", 1000) has been called: 0 times.
131 |
$(window).bindWithDelay("resize", 1000, true) has been called: 0 times.
132 |
133 |
134 |
74 |
bindWithDelay jQuery Plugin (see example)
75 |
The Basics
76 |
77 | - What does bindWithDelay do?
78 | It prevents a function call from happening EVERY time an event is fired from the browser.
79 | Rather than implementing custom timeout code, just add in this plugin and simplify your code.
80 |
81 | - How do I use it in code?
82 |
Pretty much the same as http://api.jquery.com/bind/
83 | element.bindWithDelay( eventType, [ eventData ], handler(eventObject), timeout, throttle )
84 | It works with existing code that uses the bind() function.
85 | Just add an extra parameter (timeout in milliseconds), and an optional boolean value if you would like to enable throttling.
86 | // If your code that uses bind(), just add in a timeout parameter.
87 | $("#element").bind("click", function() {...});
88 | $("#element").bindWithDelay("click", function() {...}, 1000);
89 |
90 | // If your code that uses click(), you will need to do it the same way.
91 | $("#element").click(function() {...}, 1000);
92 | $("#element").bindWithDelay("click", function() {...}, 1000);
93 |
94 | // If you would like to let it still fire once per interval while an event is fired
95 | // (called "throttling"), then put a true in for the throttle parameter:
96 | $("#element").bindWithDelay("click", function() {...}, 1000, true);
97 |
98 |
99 |
100 | - Where is the source code?
101 | http://github.com/bgrins/bindWithDelay/blob/master/bindWithDelay.js
102 |
103 |
104 |
What is the difference between throttling and not?
105 |
Imagine you are scrolling down a long page for 3 seconds and you have bindWithDelay running with a timeout of 1000ms. By default, your event will only fire a second after you have completely finished scrolling. If you have the optional throttling on, it will fire once per second during the scrolling - a total of 3 times instead of 1. Move your mouse around in circles and look at the example below to see:
106 |
107 |
A Simple Example
108 |
As you have been on this page, it has been tracking how many times your browser's mousemove, click,
109 | scroll, and resize events have fired (both with and without bindWithDelay).
110 | Go ahead and move your mouse around and click (try clicking a bunch of times in a row to see what it does)
111 | , or resize your browser to get a look at how it works.
112 |
113 |
114 |
$(document).on("mousemove") has been called: 0 times.
115 |
$(document).onDelay("mousemove", 1000) has been called: 0 times.
116 |
$(document).onDelay("mousemove", 1000, true) has been called: 0 times.
117 |
118 |
119 |
$(document).on("click") has been called: 0 times.
120 |
$(document).onDelay("click", 1000) has been called: 0 times.
121 |
$(document).onDelay("click", 1000, true) has been called: 0 times.
122 |
123 |
124 |
$(document).on("scroll") has been called: 0 times.
125 |
$(document).onDelay("scroll", 1000) has been called: 0 times.
126 |
$(document).onDelay("scroll", 1000, true) has been called: 0 times.
127 |
128 |
129 |
$(window).on("resize") has been called: 0 times.
130 |
$(window).onDelay("resize", 1000) has been called: 0 times.
131 |
$(window).onDelay("resize", 1000, true) has been called: 0 times.
132 |
133 |
134 |