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

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

• javascript
• underscore.js

Share Improve this question Follow edited Dec 18, 2012 at 16:02 Roland asked Dec 18, 2012 at 15:41 RolandRoland 9,7411919 gold badges8282 silver badges136136 bronze badges 13

• Why not use window.setTimeout() for the same purpose? – Raul Commented Dec 18, 2012 at 15:45
• 1 Try this: return $(_container).find(...).each(_.throttle(function(){}, 350));. – gen_Eric Commented Dec 18, 2012 at 16:15
• 1 Could you please tell us what that each snippet is supposed to do? Seems like you misunderstood the purpose of throttle. – Bergi Commented Dec 18, 2012 at 16:24
• 1 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 Commented Dec 18, 2012 at 16:28
• 1 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 Commented Dec 18, 2012 at 16:32

 |  Show 8 more ments

3 Answers 3

Sorted by: Reset to default 6

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 ment. We should read the official document more.

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

_.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;
};

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