bindWithDelay jQuery Plugin (see example)

The Basics

• What does bindWithDelay do? It prevents a function call from happening EVERY time an event is fired from the browser. Rather than implementing custom timeout code, just add in this plugin and simplify your code.
• How do I use it in code?

  Pretty much the same as http://api.jquery.com/bind/
  element.bindWithDelay( eventType, [ eventData ], handler(eventObject), timeout, throttle )

  It works with existing code that uses the bind() function. Just add an extra parameter (timeout in milliseconds), and an optional boolean value if you would like to enable throttling.

  // If your code that uses bind(), just add in a timeout parameter.
  $("#element").bind("click", function() {...});
  $("#element").bindWithDelay("click", function() {...}, 1000);
  
  // If your code that uses click(), you will need to do it the same way.
  $("#element").click(function() {...}, 1000);
  $("#element").bindWithDelay("click", function() {...}, 1000);
  
  // If you would like to let it still fire once per interval while an event is fired
  // (called "throttling"), then put a true in for the throttle parameter:
  $("#element").bindWithDelay("click", function() {...}, 1000, true);
  

• Where is the source code?
  http://github.com/bgrins/bindWithDelay/blob/master/bindWithDelay.js

What is the difference between throttling and not?

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:

A Simple Example

As you have been on this page, it has been tracking how many times your browser's mousemove, click, scroll, and resize events have fired (both with and without bindWithDelay). Go ahead and move your mouse around and click (try clicking a bunch of times in a row to see what it does) , or resize your browser to get a look at how it works.

$(document).bind("mousemove") has been called: 0 times.

$(document).bindWithDelay("mousemove", 1000) has been called: 0 times.

$(document).bindWithDelay("mousemove", 1000, true) has been called: 0 times.

$(document).bind("click") has been called: 0 times.

$(document).bindWithDelay("click", 1000) has been called: 0 times.

$(document).bindWithDelay("click", 1000, true) has been called: 0 times.

$(document).bind("scroll") has been called: 0 times.

$(document).bindWithDelay("scroll", 1000) has been called: 0 times.

$(document).bindWithDelay("scroll", 1000, true) has been called: 0 times.

$(window).bind("resize") has been called: 0 times.

$(window).bindWithDelay("resize", 1000) has been called: 0 times.

$(window).bindWithDelay("resize", 1000, true) has been called: 0 times.