关于防抖函数有个疑问

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1099 天前的主题，其中的信息可能已经有所发展或是发生改变。

在网上查到的简单的防抖函数实现是这样的，试了一下确实可以实现防抖，但是我没搞明白多次调用函数每次 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)
  }
}

timer

函数

func

args

11 条回复 • 2021-11-05 17:51:16 +08:00

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

可以看这个
juejin.cn/post/6934149265153343496

cwp374240920

2021-11-05 11:03:49 +08:00 via Android

你用的是他 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 via Android

闭包

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 来实现