Javascript Lodash Debounce 不去抖动

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29131561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 02:53:54  来源:igfitidea点击:

Lodash Debounce not debouncing

javascriptangularjscoffeescriptunderscore.jslodash

提问by Sasha

I'm trying to 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 SOor Google (generally, that they're not invoking the function that _.debouncereturns).

我正在尝试使用 Lodash 去抖动一个函数,当它调用该函数时,它似乎根本没有去抖动。我的问题似乎与我在 SO或 Google上的其他地方看到的错误不同(通常,他们没有调用_.debounce返回的函数)。

My currently super-simple implementation is as follows (in Angular with CoffeeScript):

我目前的超级简单实现如下(在 Angular 中使用 CoffeeScript):

  s.search = -> _.debounce( s._makeSearchRequest, 1000 )()

  s._makeSearchRequest = -> console.log("making search request")

In JS, I believe that's:

在 JS 中,我相信是:

  s.search = function() { _.debounce( s._makeSearchRequest, 1000 )() }

  s._makeSearchRequest = function() { console.log("making search request") }

I run s.search()by typing into an input box, and if I type gibberish very quickly, the console prints out "making search request" on every key press, so many times per second -- indicating that it hasn't been debounced at all.

s.search()通过在输入框中输入来运行,如果我非常快地输入乱码,控制台会在每次按键时打印出“发出搜索请求”,每秒很多次 - 表明它根本没有去抖动。

Any ideas what's I'm doing wrong?

任何想法我做错了什么?

回答by JLRishe

_.debouncecreatesa function that debounces the function that's passed into it. What your s.searchfunction is doing is calling _.debounceall over again every time s.searchis called. This creates a whole new function every time, so there's nothing to debounce.

_.debounce创建一个函数来消除传入它的函数的抖动。您的s.search函数正在做的是_.debounce每次调用时都再次s.search调用。这每次都会创建一个全新的功能,所以没有什么可以去抖动的。

So the solution is to remove the arrow and the extra pair of parentheses, and make sure that s._makeSearchRequestis defined before you access it:

所以解决方案是删除箭头和额外的一对括号,并确保s._makeSearchRequest在访问它之前定义它:

s._makeSearchRequest = -> console.log("making search request")

s.search = _.debounce( s._makeSearchRequest, 1000 )

Example (using JavaScript):

示例(使用 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>

回答by bvaughn

Try this:

尝试这个:

s._makeSearchRequest = function() {
    console.log("making search request");
}

s.search = _.debounce( s._makeSearchRequest, 1000 );

POC: http://jsfiddle.net/bvaughn/3saj6znk/

POC:http: //jsfiddle.net/bvaughn/3saj6znk/