Underscore's throttle function doesn't fire

Question

Is the _.throttle(function() {}, 250) function only firing on click ? Because I'm trying to run some code with a small delay and it doesn't seem to be working for some reason.

return _.throttle(function() {
    return ( $(this).hasClass('dataRevealed') ) ? $(this).addClass('animated fadeOut') : true;
}, 350);

EDIT : The function looks like this :

Application.CardView.prototype.removeSimilarCards = function(_container) {
    return $(_container).find('[data-identifier="card-view"]').each(function() {
        console.log("first");
        _.throttle(function() {
            console.log("inner");
            return ( $(this).hasClass('dataRevealed') ) ? $(this).addClass('animated fadeOut') : true;
        }, 350);
    });
};

How do you call that function? Do you expect to get the result of the delayed execution? — Bergi, Dec 18 '12 at 15:55
Just added the entire function, it's called when some condition in my code is met — Roland, Dec 18 '12 at 16:02
`_.throttle` returns a function. In your `each` you are are calling `_.throttle`, but you are never using the function it returns. — gen_Eric, Dec 18 '12 at 16:04
@RocketHazmat ~ I see, and what other way should I use in order for my delay to occur ? — Roland, Dec 18 '12 at 16:11
Try this: `return $(_container).find(...).each(_.throttle(function(){}, 350));`. — gen_Eric, Dec 18 '12 at 16:15
Could you please tell us what that `each` snippet is supposed to do? Seems like you misunderstood the purpose of `throttle`. — Bergi, Dec 18 '12 at 16:24
`each` loops through all the elements I gather from the container, per say I have 15 divs that are found and then I'm looping all of them and applying the delayed function — Roland, Dec 18 '12 at 16:26
So, you want the function inside the each to be called with a delay? Unfortunately, `_.throttle` is the wrong tool here. What you want is a function queue. Add the functions to a queue, then dequeue them using a timeout. — gen_Eric, Dec 18 '12 at 16:28
Wait. What are you trying to do with the returned value? You want to delay function calls, but you want to return values? What exactly do you want to do? — gen_Eric, Dec 18 '12 at 16:32
`_.throttle` is used to prevent a function from running too many times by "throttling" it so it only runs once every X ms. — gen_Eric, Dec 18 '12 at 16:33

score 6 · Answer 1 · answered Dec 02 '14 at 16:58

As in the official document underscore#throttle mentioned, the passed in function has to be a throttled version. You see, the "throttling" has to be executed before it is passed in. I just got this working. :) @closure mentioned this in above comment. We should read the official document more.

var throttled = _.throttle(updatePosition, 100);
$(window).scroll(throttled);

score 1 · Accepted Answer · answered Dec 18 '12 at 16:41

1

_.throttle is used to prevent a function from running too many times by "throttling" it so it only runs once every X ms. You probably want to use a function queue, dequeuing on a delayed timer.

Something like this:

Application.CardView.prototype.removeSimilarCards = function(_container) {
    var $ele = $(_container),
        $cards = $ele.find('[data-identifier="card-view"]');

    $cards.each(function() {
        var $this = $(this);
        $ele.queue('func', function(next){
            if($this.hasClass('dataRevealed')){
                $this.addClass('animated fadeOut');
            }
            setTimeout(next, 350);
        });
    });

    setTimeout(function(){
        $ele.dequeue('func');
    }, 350);

    return $cards;
};

answered Dec 18 '12 at 16:41

gen_Eric

223,194
41
299
337

Haven't used the '.queue()' until now :) Though, would there be way to fade them out all at once and now one by one ? The reason why I'm doing this is because there's an animation which takes about 350ms, only after that I will fade out the divs and remove them from the DOM, so maybe should I listen for transitionend ? – Roland Dec 18 '12 at 16:52
Don't assume that an animation will finish in a certain time. How are you doing that animation? It probably has a callback option, use that instead. – gen_Eric Dec 18 '12 at 16:53
It's CSS animation, a flipping animation – Roland Dec 18 '12 at 17:30
1

I've never used CSS animations, but you can try the `transitionend` event. http://stackoverflow.com/a/2794186 – gen_Eric Dec 18 '12 at 17:36

closure · Answer 3 · 2012-12-18T15:56:42.090

0

May be some other issue in your code.

I have created a sample to show that it is working perfectly see example

Here is the code:

var refTime = +new Date();
var fn = _.throttle(function() {
    console.log((+new Date() - refTime)/1000);
}, 3000);

window.setInterval(fn, 10);

edited Dec 18 '12 at 15:56

answered Dec 18 '12 at 15:50

closure

7,412
1
23
23

I have no idea what could be going wrong, because I'm also using the `_.debounce` somewhere else and it works just fine – Roland Dec 18 '12 at 15:59
Had a doubt about $(this) not working, but that is working too. Check: http://jsbin.com/asaxod/8/watch – closure Dec 18 '12 at 16:12
May be swap code in your throttle to something else to debug. – closure Dec 18 '12 at 16:13
I just found that it's because my each function I think @raghaw :) – Roland Dec 18 '12 at 16:14
I found the issue in your code. You are not receiving _throttle response anywhere. That is the function you must refer. – closure Dec 18 '12 at 16:15
2

function handle passed to each should be throttle function – closure Dec 18 '12 at 16:16
You mean something like : ` $(_container).find(...).each(_.throttle(function(){}, 350));` , but that only makes the first encounter work, the rest are not delayed – Roland Dec 18 '12 at 16:24

Underscore's throttle function doesn't fire

3 Answers3