cowboy / jquery-throttle-debounce Goto Github PK

View Code? Open in Web Editor NEW

1.1K 33.0 190.0 379 KB

jQuery throttle / debounce: Sometimes, less is more!

Home Page: http://benalman.com/projects/jquery-throttle-debounce-plugin/

License: GNU General Public License v2.0

PHP 2.77% JavaScript 97.23%

jquery-throttle-debounce's Introduction

jQuery jQuery throttle / debounce: Sometimes, less is more!

http://benalman.com/projects/jquery-throttle-debounce-plugin/

Version: 1.1, Last updated: 3/7/2010

jQuery throttle / debounce allows you to rate-limit your functions in multiple useful ways. Passing a delay and callback to $.throttle returns a new function that will execute no more than once every delay milliseconds. Passing a delay and callback to $.debounce returns a new function that will execute only once, coalescing multiple sequential calls into a single execution at either the very beginning or end.

Visit the project page for more information and usage examples!

Documentation

http://benalman.com/code/projects/jquery-throttle-debounce/docs/

Examples

These working examples, complete with fully commented code, illustrate a few ways in which this plugin can be used.

http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/
http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

Support and Testing

Information about what version or versions of jQuery this plugin has been tested with, what browsers it has been tested in, and where the unit tests reside (so you can test it yourself).

jQuery Versions

none, 1.3.2, 1.4.2

Browsers Tested

Internet Explorer 6-8, Firefox 2-3.6, Safari 3-4, Chrome, Opera 9.6-10.1.

Unit Tests

http://benalman.com/code/projects/jquery-throttle-debounce/unit/

Release History

1.1 - (3/7/2010) Fixed a bug in jQuery.throttle where trailing callbacks executed later than they should. Reworked a fair amount of internal logic as well.
1.0 - (3/6/2010) Initial release as a stand-alone project. Migrated over from jquery-misc repo v0.4 to jquery-throttle repo v1.0, added the no_trailing throttle parameter and debounce functionality.

License

jquery-throttle-debounce's People

Contributors

Stargazers

Watchers

Forkers

lcharold foundry-modules hcientist mrksmts andreax79 nvdnkpr johnkpaul richardgrey liluxdev kamilc rodolphegohard aurimas639 esadun iharvey edmund-huber mkleywegt sydney-o9 ttg-florkrum emiliobravo rajeshvv shakakira dthume jorisjan old-grrt ant777 jlcoresys awesome gerhobbelt varadhanr andersdjohnson huncent lynzz tolusonaike edelooff jaybuz e-gorobets ptyz030529 zanscath gjuggler tricki emcpadden mateusz-nowak meded90 produtorapivot mjau-mjau chimiste zanonnicola tongxunlu orientalperil fritoebola shahw emagnier yougov suhoij ivansignorile kingctan umaar ronald33 shelwinjue amcsi errfanwadia tinja hugohua niksy sebashton bryangreen m-peshekhonov yaphats gotomanners tkm-ymmt jaggedsoft brianmgray kujian ninofloris silvajohnny itnovator davecranwell jwahdatehagh fstani theholmesgroup ohashi0116 mamezito-zz akaashmyth bmorrall alexllllllming silverorange leoneed vparitskiy glivera objectivedev kclarke richardenelson show027 zba fabrik fucssjs demon1110 simplicitytrade dreamweiver jkocour

jquery-throttle-debounce's Issues

Separate delay for inactivity timeout

In my case, the responsiveness of the final call in a throttle is very important.
So I think I need a separate inactivity timeout.

For example, if some event happens during scrolls (say maybe every 5ms), it's nice to space out the actual callback calls to maybe 250ms, but once the scrolling is done, I would like the final callback call to come very quickly, maybe after 50ms of no calls to the throttled function. This is important to make things look right for the user.
I don't want to lower the current delay to 50ms because it slows down my page a lot.
Notice in my example that: 5 ms average interval < 50 ms < 250 ms

If you have no time for this, I could code it with a few tips from you to speed things up.

Does not work inside function()

Hello,

This works:

function test() {
    console.log('test');
}
$(window).on('scroll', $.throttle(250, test));

But this does not:

function test() {
    console.log('test');
}

 $(window).on('scroll', function() {
 	$.throttle(250, test);
 })

test() never gets called at all.

I need to call the throttled function if some specific circunstances happens, and I define these circunstances inside a function(). How can I use $.throttle then?

Example:

$('#check_subdomain').on('keyup', function() {
    if ($(this).val().length > 3) {
        $.throttle(1000, check_subdomain_availability_ajax);
    }
}

Add to plugins.jquery.com

Would be nice if you added a throttle-debounce.jquery.json file and the push notifications so this can be included on http://plugins.jquery.com/

Also, would be nice to be in bower as well.

Adding support for observers

I'm not sure if this is possible but as MDN suggests that observers behave very similarly to event listeners, it might be worth the shot. The MutationObserver is such an observer. It's really useful and cool (it observes a DOM element as the name implies), but from a bit of testing I found that it encounters a lot of changes which in turn trigger many callbacks. It would be nice to be able to throttle and even debounce these!

debounce timeout documentation should be clarified

It should be clarified in the graphical and ASCII art documentation, that the callback will be invoked after the specified pause has elapsed since the last debounced call. I think in the present form it's quite misleading.

Add to bower and npm

Can't use this script because its not available in Bower nor npm

Heading of README.markdown has duplicate "jQuery"

Easy one: the first line of README.markdown has the word jQuery twice in a row. One of them should be deleted.

First line of file:

jQuery jQuery throttle / debounce: Sometimes, less is more!

add example using call

In the examples for throttle, might want to include a new example wherein throttle is not the function in an event callback.
In this new example show how to use call[1] to start the throttling yourself.

[1] https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/call

undefined jquery "guid" property

With the following HTML

  <html>
    <head>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
      <script type="text/javascript" src="./jquery.ba-throttle-debounce.js"></script>

      <script type="text/javascript">
        $.debounce(function() {});
      </script>

    </head>
  </html>

I get the following traceback:

  Uncaught TypeError: Cannot read property 'guid' of undefined
    at "$.throttle.jq_throttle" in jquery.ba-throttle-debounce.js:190
    at "$.debounce" jquery.ba-throttle-debounce.js:248
    at (anonymous function) in foo.html:6

I am using Chromium 11 on Ubuntu.

Issue on FireFox

Works fine on Google Chrome, but the same is not working on Firefox's latest version.

would be nice to have timeout_id public

At the moment it's not possible to cancel the callback invocation (using clearTimeout).

Something like this would help a lot:

 // Return the wrapper function.
 wrapper.timeout_id = timeout_id;
 return wrapper;

upgrade to jquery 3.x version

please upgrade to jquery 3.x version!

[enhancement] Add missing bower.json.

Hey, maintainer(s) of cowboy/jquery-throttle-debounce!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library cowboy/jquery-throttle-debounce is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "cowboy/jquery-throttle-debounce",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

eventData?

I'm having a hell of a time passing eventData into throttle-debounce.

Is there something missing here? how can we pass values into this and still carry them to the callback?

passing parameters to callback?

Is it possible to pass arguments to the callback function?
e.g.:

$(window).scroll($.debounce(40, updateLeftOffset(el, offset)));

This example throws an error right now. Is there a specific reason why this is not desired?

Is this sweet little plugin still maintained?

Fails in jQuery 1.4.2 if callback is not defined

We had to add a check to verify that callback was defined as follows (line 189) - otherwise the wrapper.guid assignment failed catastrophically:

    // Set the guid of `wrapper` function to the same of original callback, so
    // it can be removed in jQuery 1.4+ .unbind or .die by using the original
    // callback as a reference.
    if ($.guid && callback) {
          wrapper.guid = callback.guid = callback.guid || $.guid++;
    }

d3.js mousemove

I am using d3.js library.

.on( "mousemove", $.throttle(1000, false, function() { console.log(d3.mouse(this) }) )

This returns only 1st result and some random good results afterwards. In general, it returns error:
[Error] TypeError: null is not an object (evaluating 't.sourceEvent')
b (d3.min.js, line 1)
mouse (d3.min.js, line 3)
(anonymous function) (index.html, line 74)
exec (jquery.ba-throttle-debounce.js, line 149)

If true is used for no_trailing it works but without the last event data (of course). I need false no_trailing.

jQuery 1.7.1 compatibility

Any word on whether this plugin still works now that were 3 versions of jQuery later?

Debouncing an existing an existing listener

Hey Ben,

I'm using FCBKcomplete, which is basically a Facebook-esque lookup via ajax for jQuery. However, the current implementation checks on every keystroke, which it does via it's own listener.

Here is how I'm using it on doc ready:

$("#tagselect").fcbkcomplete({
        json_url: "/gettags",
        cache: true,
        filter_case: false,
        filter_hide: true,
        firstselected: true,
        filter_selected: true,
        addontab: true,
        maxitems: 5,
        newel: true,
    });

Since it already has a listener for keypresses, how can I debounce this?

Much obliged,
Dennis