实现防抖函数(debounce)

142 阅读1分钟

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

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

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

适用场景:

按钮提交场景:防止多次提交按钮,只执行最后提交的一次 还有搜索联想词功能类似

手写简化版:

// func是用户传入需要防抖的函数
// wait是等待时间,默认50毫秒
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器,延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}