Lodash Debounce 没有去抖动
Lodash Debounce not debouncing
我正在尝试 debounce a function using Lodash, and while it's invoking the function, it doesn't seem to debounce it at all. My issue doesn't seem to be the same mistake as what I've seen elsewhere on SO 或 Google(通常,他们不会调用 _.debounce
returns 的函数)。
我目前超级简单的实现如下(在 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()
通过在输入框中键入,如果我很快键入乱码,控制台会在每次按键时打印出 "making search request",每秒多次-- 表示它根本没有去抖动。
知道我做错了什么吗?
试试这个:
s._makeSearchRequest = function() {
console.log("making search request");
}
s.search = _.debounce( s._makeSearchRequest, 1000 );
_.debounce
创建 一个函数,该函数对传递给它的函数进行去抖动。您的 s.search
函数所做的是在每次调用 s.search
时重新调用 _.debounce
。这每次都会创建一个全新的函数,所以没有什么可以去抖动的。
所以解决方案是删除箭头和额外的一对括号,并确保在访问它之前定义了 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>
我正在尝试 debounce a function using Lodash, and while it's invoking the function, it doesn't seem to debounce it at all. My issue doesn't seem to be the same mistake as what I've seen elsewhere on SO 或 Google(通常,他们不会调用 _.debounce
returns 的函数)。
我目前超级简单的实现如下(在 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()
通过在输入框中键入,如果我很快键入乱码,控制台会在每次按键时打印出 "making search request",每秒多次-- 表示它根本没有去抖动。
知道我做错了什么吗?
试试这个:
s._makeSearchRequest = function() {
console.log("making search request");
}
s.search = _.debounce( s._makeSearchRequest, 1000 );
_.debounce
创建 一个函数,该函数对传递给它的函数进行去抖动。您的 s.search
函数所做的是在每次调用 s.search
时重新调用 _.debounce
。这每次都会创建一个全新的函数,所以没有什么可以去抖动的。
所以解决方案是删除箭头和额外的一对括号,并确保在访问它之前定义了 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>