我正在尝试debounce a function using Lodash,并且在调用该函数时,它似乎根本没有对它进行反跳操作。我的问题似乎与其他在on SO或Google上看到的错误不一样(通常,它们没有调用_.debounce
返回的函数)。
我当前的超简单实现如下(在Angular中使用CoffeeScript):
s.search = -> _.debounce( s._makeSearchRequest, 1000 )()
s._makeSearchRequest = -> console.log("making search request")
在JS中,我相信这是:
s.search = function() { _.debounce( s._makeSearchRequest, 1000 )() }
s._makeSearchRequest = function() { console.log("making search request") }
我通过在输入框中键入来运行
s.search()
,如果我很快键入乱码,控制台将在每次按键时每秒打印多次“发出搜索请求”,这表明它根本没有被消除抖动。任何想法我在做什么错?
最佳答案
_.debounce
创建一个函数,该函数会反跳传递给它的函数。 s.search
函数正在执行的操作是在每次调用_.debounce
时再次重新调用s.search
。每次都会创建一个全新的功能,因此没有任何反跳现象。
因此,解决方案是删除箭头和多余的一对括号,并确保在访问s._makeSearchRequest
之前已定义它:
s._makeSearchRequest = -> console.log("making search request")
s.search = _.debounce( s._makeSearchRequest, 1000 )
示例(使用JavaScript):
var s;
s = {};
s._makeSearchRequest = function(q) {
return console.log("making search request: " + q);
};
s.search = _.debounce(s._makeSearchRequest, 1000);
// call s.search three times in a row
s.search(1);
s.search(2);
s.search(3);
// call s.search after 500 ms
setTimeout(s.search, 500, 4);
// call s.search after 3 seconds
setTimeout(s.search, 3000, 5);
// timer to show passage of time
var i = 0;
var t = setInterval(function () {
i += 1;
console.log(i + " seconds elapsed");
if (i > 5) { clearInterval(t); }
}, 1000);
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>