I want to filter a backbone collection. Hence, i want to throttle the keyup event and fire when user is done typing or take a pause.

My before throttle function is firing and i am getting the log('before throttle'). However, actual filter filterByTitle is not firing. Any suggestion?

linkApp.Views.FilteredLinks = Backbone.View.extend({

    el:'#divFilter',

    events:{
        'keyup #filterTitle': "filterByTitleThrottled"
    },

    initialize:function(){          
    },

    render:function(){
    },      

    filterByTitleThrottled:function(){
        console.log('before throttle');
        _.throttle(this.filterByTitle, 100);
    },
    filterByTitle:function(){
        console.log('actual filter by title');
    }
});

I want to filter a backbone collection. Hence, i want to throttle the keyup event and fire when user is done typing or take a pause.

My before throttle function is firing and i am getting the log('before throttle'). However, actual filter filterByTitle is not firing. Any suggestion?

linkApp.Views.FilteredLinks = Backbone.View.extend({

    el:'#divFilter',

    events:{
        'keyup #filterTitle': "filterByTitleThrottled"
    },

    initialize:function(){          
    },

    render:function(){
    },      

    filterByTitleThrottled:function(){
        console.log('before throttle');
        _.throttle(this.filterByTitle, 100);
    },
    filterByTitle:function(){
        console.log('actual filter by title');
    }
});

• javascript
• backbone.js
• underscore.js
• backbone-events

2 Answers 2

I think it would be better to _.throttle this.filterByTitle on initialize to make it works properly.

initialize:function(){
      this.filterByTitle = _.throttle(this.filterByTitle, 100);
},

You'll throttle it once and you'll get result that you're expecting.

When you call to _.throttle - it's creates and returns a new version of the passed function. And after this you can use her:

filterByTitleThrottled:function(){
    console.log('before throttle');
    var trottle = _.throttle(this.filterByTitle, 100);
    trottle();
}