实现防抖函数(debounce)

# 实现防抖函数(debounce)

防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时

防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行

eg. 像仿百度搜索,就应该用防抖,当我连续不断输入时,不会发送请求;当我一段时间内不输入了,才会发送一次请求;如果小于这段时间继续输入的话,时间会重新计算,也不会发送请求。

手写版:

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
 // 缓存一个定时器id
 let timer = 0
 // 这是返回的函数是每次用户实际调用的防抖函数
 // 如果已经设定过定时器了就清空上一次的定时器
 // 开始一个新的定时器,延迟执行用户传入的方法
 return function (...args) {
  if (timer) clearTimeout(timer)
  timer = setTimeout(() => {
   func.apply(this, args)
  }, wait);
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

适用场景:

按钮提交场景:防止多次提交按钮,只执行最后提交的一次 服务端验证场景:表单验证需要服务端配合,只执行一段连续的输入事件的最后一次,还有搜索联想词功能类似

上次更新: 2022/7/1 下午2:06:37