我有一个#search
元素,当keyup
事件发生时,该元素将触发一个函数。这将阻止搜索结果更新按下的每个字母。问题是使用backbone.js时,我有一个散列事件,适用的事件如下所示:'keyup #search' : 'setSearch'
它在keyup
事件发生时调用setSearch()
函数。我不太清楚此时如何处理它。我尝试了各种方法,但没有一种方法能使计时器在函数结束后继续运行。
我有这样的话:
setSearch: function(event) {
var timer = window.setTimeout( function() {
// run function here
alert('fired');
}, 500);
},
而不是alert('fired')
,我将运行我自己的函数。我可以理解为什么这段代码不起作用(为每个发生的keyup
事件设置了一个计时器。但我仍然不清楚我还可以尝试什么。
4条答案
按热度按时间yiytaume1#
你要找的其实是underscore.js提供给你的一个函数(Backbone的一个要求)
简而言之,这将返回一个新形式的匿名函数,该函数每500ms只能被调用一次,您可能需要根据需要调整时间。
更多信息请访问:http://documentcloud.github.com/underscore/#throttle
eblbsuwk2#
您的视图中需要一个存储计时器ID的示例变量,然后您可以根据需要停止并重新启动它:
因此,如果计时器已经在运行,则调用
clearTimeout
来停止它,启动一个新的计时器,并将定时器ID存储在self.timer
中(AKAthis.timer
)。您还需要在定时器的回调函数中重置已存储的定时器ID,否则setSearch
在其定时器触发一次后将不执行任何操作。所有的self
业务只是捕获this
,以便在定时器的回调函数中使用。dced5bon3#
Underscore的
_.debounce(function, wait)
函数正是要处理这种情况,它阻止了每次keyup
更新搜索结果。_.debounce()的下划线文档声明:创建并返回传递的
function
的新的去抖动版本,该版本将延迟其执行,直到自上次调用它以来已过去wait
毫秒。对于实现只应在输入停止到达后发生的行为很有用。重构后的代码看起来就像这样简单:
rbl8hiat4#
既然你希望你的事件处理器事件能够维护一个事件是否有
recentlyFired
,你可能想把你的处理器 Package 成一个闭包并维护那个状态。当一个事件被激发时,状态应该被更改为true,并在500ms的延迟后重置为false。