[ 实现防抖和节流函数 ] | 刷题打卡

题目描述

• 手写一个防抖和节流函数

思路分析

防抖

• 在规定的时间内，当连续触发一个事件时，只执行最后一次
• 可以用定时器setTimeout来确定执行的时机，比如说我们设定时间间隔为100ms，也就是说，在触发该事件后100ms内，如果没有继续触发这个事件，那么说明系统已经稳定，可以执行操作，否则就继续定时100ms等待稳定

节流

• 节流：连续触发某一个事件时，会按照特定的时间间隔执行该函数
• 同样的，设定间隔为100ms，那么当我们连续触发某个事件时，会每个100ms执行一次

代码实现

防抖

const debounce = (fn, delay) => {
    let timer = null
    return () => {
        if (timer) {  //为真。说明不该执行的时候又触发了该事件，所以要清除
            clearTimeout(timer)
        }
        timer = setTimeout(fn, delay)
    }
}
复制代码

节流

const throttle = (fn, delay) => {
  let valid = true //是否执行flag
  return () => {
    if (!valid) {
      return
    }
    valid = false
    setTimeout(() => { //delay之后触发，重置执行的flag
      fn()
      valid = true //
    }, delay)
  }
}
复制代码

总结

• 使用场景：

  • 防抖：调整窗口大小，监听屏幕滚动事件，鼠标移动等，规定时间内只触发最后一次
  • 节流：实时搜索功能。特定频率触发事件

• 具体应用场景看他们需要执行的次数，只执行一次用防抖，会执行多次就是节流