cowboy / jquery-throttle-debounce

jQuery throttle / debounce: Sometimes, less is more!

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

jQuery 1.7.1 compatibility

ianstormtaylor opened this issue · comments

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

This plugin actually doesn't even use jQuery.

I'm using 1.1 - 3/7/2010 fine with jquery 1.7.1

I can confirm that the latest is indeed broken with jquery 1.7.1 - I don't know why, but here's the code we used:

<script>
        $(document).ready(function() {

            function RatesPrefixLookup() {
                alert(1);
                $("#prefix_lookup_result").html("Searching, please wait..");
            }

            $("#prefix_lookup").keyup(function() {
                $.throttle( 1000, RatesPrefixLookup );
            });

        });
</script>
            <div>
                <input type="text" id="prefix_lookup" />
            </div>

            <div id="prefix_lookup_result">

            </div>

Hope this helps.

It works just fine with 1.7.1, you're using it wrong.
The correct usage in the above case (without the anonymous function):

$("#prefix_lookup").keyup($.throttle( 1000, RatesPrefixLookup ));

So $.throttle() can't be used within an anonymous function? This is a bug in its own rights, surely?

Works fine with any anon functions for me
On Jun 11, 2012 3:20 PM, "Cal Leeming" <
reply@reply.github.com>
wrote:

So $.throttle() can't be used within an anonymous function? This is a bug
in its own rights, surely?


Reply to this email directly or view it on GitHub:

#8 (comment)

@raldred Can you please provide a working proof of concept (like the one I pasted previously). Try and keep it as minimal as possible though.

No, it's not a bug, that's how throttle/debounce works. It returns a function which is used as event handler.

@raldred You probably mean you can pass an anonymous for throttle/debounce functions, not as an event handler.

Basically you can use it like this:

$("#prefix_lookup").keyup($.throttle( 1000, function() { /* Code goes here */ } ) );

Okay, that makes sense.

For anyone else that hits this snag, you can use the following to fix it I believe:

$.throttle( 1000, RatesPrefixLookup )();

@dioslaska yes sorry that correct I wasn't clear :)

@foxx That might work, but really why do you need the anon event handler?
Wouldn't it just be easier to bind a second handler for keyup?

@raldred In that specific example yes, but there are cases where you might not want to use it like this

This is the WRONG way to throttle:

function doSomething() {
  // your code goes here
}

$("input").keyup(function() {
   $.throttle(1000, doSomething);
});

This is the RIGHT way to throttle:

function doSomething() {
  // your code goes here
}

$("input").keyup( $.throttle(1000, doSomething) );

(You could also store the throttled function in a variable and pass that into the .keyup function)

For any given function that you wish to throttle or debounce, the $.throttle or $.debounce should only ever be called once. If $.throttle or $.debounce is being called more than once per function-to-be-throttled-or-debounced, you've done it wrong.

Every time $.throttle or $.debounce is called, it returns a function. That function, when called, uses some internal state to determine if the original function should be called or not. If you were to call $.throttle or $.debounce multiple times, it would just keep returning functions.