0 区别与联系

  • 相同：在不影响客户体验的前提下，将频繁的回调函数，进行次数缩减，避免大量计算导致的页面卡顿

  • 不同：防抖是将多次执行变为最后一次执行，节流是将多次执行变为在规定时间内只执行一次

1 节流（throttle）

  • 理解：
    • 技能cd
  • 概念：
    • 当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
  • 应用场景：
    • 鼠标不断点击触发，mousedown(单位时间内只触发一次)
    • 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
  • 代码：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

export const throttle = (fn, time) => {
  // 声明计时器
  let timer: timer = null
  // 返回节流函数
  return (...args) => {
    // 如果计时器存在，则不执行fn
    if (timer) return
    // 否则执行fn，并重新设置计时器
    fn(...args)
    timer = setTimeout(() => {
      // 规定时间后，将计时器置空
      timer = null
    }, time)
  }
}
// 如果fun会导致页面刷新（setState），则使用时间戳+localStorage的形式进行节流处理
export const throttle = (fun, delay) => {
  let last = localStorage.getItem('last')
  return (...args) => {
    localStorage.setItem('now', String(Number(new Date())))
    let now = localStorage.getItem('now')
    // 如果时间还没到，就什么也不做
    if (last && Number(now) - Number(last) < delay) return
    // 第一次触发或者间隔时间大于delay，记录最后一次触发时间，并执行函数
    localStorage.setItem('last', now)
    fun(...args)
  }
}

2 防抖（debounce）

  • 理解：

    • 回城被打断，只要被打断，就重新回城

    • 计算机睡眠事件

  • 概念：

    • 延时执行。指触发事件后在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间。

  • 应用场景：

    • search输入框搜索联想，用户在不断输入值时，用防抖来节约请求资源。

    • 按钮点击:收藏,点赞,心标等

    • window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

  • 代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

export const debounce = (fn, time) => {
  let timer
  return (...args) => {
    // 清除上一个计时器
    clearTimeout(timer)
    // 重新计时
    timer = setTimeout(() => {
      // 延时执行
      fn(...args)
    }, time)
  }
}