下划线反Bounce vs香草Javascript设置超时

我知道undertore.js中的

debounce

返回一个函数，该函数将推迟执行，直到等待时间结束

---

我的问题是，在普通Javascript中使用

debounce

是否比常规的

setTimeout

函数有优势？它们的工作原理不一样吗？

setTimeout

和

debounce

绝不是一回事

setTimeout

只需等待

n

毫秒，然后调用提供的函数<另一方面，code>debounce返回一个函数，该函数仅在上次调用函数后

n

毫秒后调用回调

差别很大。去抖动/节流（它们不是一回事）函数通常用于减少用户输入导致的函数调用量。想象一个自动完成/提前键入字段。您可能会在每次击键时执行ajax请求，但这可能会有点沉重，因此您可以对该函数进行去抖动，这样它只会在最后一次击键后触发200ms

---

您可以在这里阅读文档：

它们非常不同，在完全不同的情况下使用

\uu.debounce

返回一个

函数

，

设置超时

返回一个

id

，您可以使用该id取消超时

无论调用u.debounce返回的函数多少次，它都只会在给定的时间范围内运行一次

var log\u once=.debounce（log，5000）；
函数日志（）{
console.log（'prints'）；
}
log_once（）；
log_once（）；
log_once（）；
log_once（）；
log_once（）；
var id=setTimeout（函数（）{
log（'hello'）；
}, 3000);
清除超时（id）
您还可以用普通JavaScript实现自己的去Bounce。一篇被广泛引用的文章是David Walsh的文章，其中包括下划线在其实现中使用的源代码：

//返回一个函数，该函数只要继续被调用，就不会被调用
//被触发。函数停止调用后将被调用
//N毫秒。如果传递了'immediate'，则在
//前缘，而不是后缘。
函数解盎司（函数、等待、立即）{
var超时；
返回函数（）{
var context=this，args=arguments；
var later=function（）{
超时=空；
如果（！immediate）函数应用（上下文，参数）；
};
var callNow=立即&&！超时；
clearTimeout（超时）；
超时=设置超时（稍后，等待）；
if（callNow）funct.apply（上下文，参数）；
};
};

debounce函数用作您要调用的实际函数的生成器，这样，状态可以在闭包内部保持，如下所示：

//示例函数
让sayHello=（name）=>console.log（`Hi${name}`）
//生成一个非公告版本，两次调用之间的最小间隔时间为2秒
让sayHelloDebounced=debounce（sayHello，2000）
//你想怎么打都行
SayHellode反弹（“大卫”）

堆栈片段中的演示

函数去盎司（func，wait，immediate）{
var超时；
返回函数（）{
var context=this，args=arguments；
var later=function（）{
超时=空；
如果（！immediate）函数应用（上下文，参数）；
};
var callNow=立即&&！超时；
clearTimeout（超时）；
超时=设置超时（稍后，等待）；
if（callNow）funct.apply（上下文，参数）；
};
};
让sayHello=（name）=>console.log（`Hi${name}`）
让sayHelloDebounced=debounce（sayHello，2000）
SayHellode反弹（“大卫”）
SayHellode反弹（“大卫”）
SayHellodeBounched（'David'）
我在博客上看到一篇文章，其中对去盎司和油门有更清晰的解释。如果上面的答案令人困惑，一定要检查一下。它帮助我消除了疑虑。
它们有显著的不同。我建议您重新阅读文档：（并注意）仅供参考，方法返回超时值，以便您也可以手动取消它。