防抖和节流函数最简版

Posted 2021-02-11 wangtao-

防抖和节流函数最简版

防抖: 多次触发事件只执行一次(适用于断续的事件, 比如 click、input)

 1 function debounce(fn, time) {
 2   let timeout
 3   return () => {
 4     if (timeout) {
 5       clearTimeout(timeout)
 6     }
 7     timeout = setTimeout({
 8       fn
 9     }, time)
10   }
11 }

节流: 在指定时间内多次触发事件只执行一次(适用于连续的事件, 比如 scroll)

function throttle(fn, time) {
  let preTime = 0
  return () => {
    const remainTime = time - (Date.now() - preTime)
    if (remainTime <= 0) {
      fn()
      preTime = Date.now()
    }
  }
}