在我的应用程序中,我有一个显示为表格的 View ,其中包含从服务器获取的集合。我希望用户能够在文本框中写入搜索字符串来过滤此集合。
问题是每次击键都会触发 keyup 事件,我想避免这种情况,以免服务器因无用的请求而过载。所以我想使用下划线的 throttle 功能,但我无法以有效的方式实现它。
events: {
'keyup #filter' : 'filter_collection'
}
filter_collection: function(e) {
var el, throttled, value;
el = e.currentTarget;
value = $(el).val();
this.collection.server_api.filter = value;
throttled = _.throttle(_.bind(this.update_collection, this), 5000);
throttled();
}
update_collection: function() {
var promise, self;
self = this;
promise = this.collection.fetch();
$.when(promise).then(function() {
self.collection.pager();
});
}
这样,每次击键都会调用 update_collection 函数,就像之前没有
throttle
一样。 .我也试过 debounce
但是所有请求都会在等待时间后触发。我错过了什么?
任何帮助表示赞赏,谢谢!
最佳答案
每次发生 keyup 事件时调用的函数是 filter_collection
它本身并没有受到限制,您在其中创建的那个会立即被调用并丢弃。
您应该将您的事件绑定(bind)到一个节流函数:
var V = Backbone.View.extend({
events: {
'keyup #filter' : 'filter_collection'
},
filter_collection: _.throttle(function(e) {
var el, throttled, value;
el = e.currentTarget;
value = $(el).val();
this.update_collection(value);
}, 5000),
update_collection: function(val) {
var promise, self;
self = this;
promise = this.collection.fetch();
$.when(promise).then(function() {
console.log('fetched '+val);
});
}
});
你当然可以使用
_.debounce
若你宁可。见http://jsfiddle.net/nikoshr/zWrgW/演示
关于ajax - Backbone : throttle a collection filter event on a View,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15707681/