关于防抖函数有个疑问

2021-11-05 10:15:03 +08:00
 Gaays

在网上查到的简单的防抖函数实现是这样的,试了一下确实可以实现防抖,但是我没搞明白多次调用函数每次 timer 不是都会新建一个并赋值为 0 吗?为什么可以把 timer 做为判断标志?

const debounce = (func, wait = 50) => {
  let timer = 0
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}
3439 次点击
所在节点    JavaScript
11 条回复
cxe2v
2021-11-05 10:21:17 +08:00
你使用这个 debounce 的时候,是不是这样
```
funcA = debounce(yourfunction,100)
```
这一步将 yourfunction 加入了防抖函数的内部,然后你调用是调用的 funcA ,当 funcA 被调用时,实际上你是在执行
```
function(...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, args)
}, wait)
}
```
你注意这里的 timer ,就是同一个 timer
lalalaqwer
2021-11-05 10:21:21 +08:00
闭包
你可以看作每次 debounce 的调用都会创建一个空间出来,里面有一个 timer ,后面你调用的是 debounce 返回的那个函数,那个函数就把 debounce 创建的空间内的 timer 当作判断标志。
loading
2021-11-05 10:55:45 +08:00
cwp374240920
2021-11-05 11:03:49 +08:00
你用的是他 return 出来的函数,不是防抖包的这个函数
2i2Re2PLMaDnghL
2021-11-05 11:04:53 +08:00
在 SICP 应该是第一章里的基本操作
新建 timer 的时间是在调用 debounce 的时候,而不是调用 func 的时候。
letwewell
2021-11-05 11:30:21 +08:00
debounce 只调用一次。 使用闭包返回的函数才是多次执行的
qaqLjj
2021-11-05 13:51:09 +08:00
闭包
Curtion
2021-11-05 14:06:38 +08:00
debounce 函数只会调一次,需要做防抖的函数应该是 func
dfkjgklfdjg
2021-11-05 14:15:23 +08:00
闭包原理,所以你后续执行的其实只是 return 出来的匿名函数,其中的 timer 是闭包的父级变量。
function(...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, args)
}, wait)
}
Gaays
2021-11-05 16:19:51 +08:00
@cxe2v
@lalalaqwer
@dfkjgklfdjg
谢谢详细解答我明白了
Kasumi20
2021-11-05 17:51:16 +08:00
怎么拿到返回值,我觉得应该加入 Promise 来实现

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/813210

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX