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 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.

Issue on FireFox

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

upgrade to jquery 3.x version

please upgrade to jquery 3.x version!

Add to bower and npm

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

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!

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

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.

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 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

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?

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?

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++;
    }

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.

[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!

jQuery 1.7.1 compatibility

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

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.

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!

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;