jQuery/backbone.js-延迟函数调用

nnt7mjpx  于 2022-11-10  发布在  jQuery
关注(0)|答案(4)|浏览(138)

我有一个#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事件设置了一个计时器。但我仍然不清楚我还可以尝试什么。

yiytaume

yiytaume1#

你要找的其实是underscore.js提供给你的一个函数(Backbone的一个要求)

setSearch: _.throttle(function() {
                //Do Stuff
              }, 500),

简而言之,这将返回一个新形式的匿名函数,该函数每500ms只能被调用一次,您可能需要根据需要调整时间。
更多信息请访问:http://documentcloud.github.com/underscore/#throttle

eblbsuwk

eblbsuwk2#

您的视图中需要一个存储计时器ID的示例变量,然后您可以根据需要停止并重新启动它:

setSearch: function(event) {
    var self = this;
    if(self.timer)
        clearTimeout(self.timer);
    self.timer = setTimeout(function() {
        alert('fired');
        self.timer = null;
    }, 500);
}

因此,如果计时器已经在运行,则调用clearTimeout来停止它,启动一个新的计时器,并将定时器ID存储在self.timer中(AKA this.timer)。您还需要在定时器的回调函数中重置已存储的定时器ID,否则setSearch在其定时器触发一次后将不执行任何操作。所有的self业务只是捕获this,以便在定时器的回调函数中使用。

dced5bon

dced5bon3#

Underscore的_.debounce(function, wait)函数正是要处理这种情况,它阻止了每次keyup更新搜索结果。_.debounce()的下划线文档声明:
创建并返回传递的function的新的去抖动版本,该版本将延迟其执行,直到自上次调用它以来已过去wait毫秒。对于实现只应在输入停止到达后发生的行为很有用。
重构后的代码看起来就像这样简单:

setSearch: function(event) {
    _.debounce(doSomething, 300);
},
rbl8hiat

rbl8hiat4#

既然你希望你的事件处理器事件能够维护一个事件是否有recentlyFired,你可能想把你的处理器 Package 成一个闭包并维护那个状态。当一个事件被激发时,状态应该被更改为true,并在500ms的延迟后重置为false。

setSearch: function( ) {
    var firedRecently = false;
    return function(event) {
        if (firedRecently) {
            // it has fired recently. Do you want to do something here?
        } else {
            // not fired recently
            firedRecently = true;
            // run your function here
            alert('fired');
            var resetStatus = window.setTimeout( function () {
                firedRecently = false;
            }, 500);
        }
    }
}( );

相关问题