Js中防抖,节流的理解

发表于 更新于

函数防抖（debounce）

事件再被触发n秒后执行回调，如果在等待时间内再次触发事件，则计时从新开始。

1
2
3
4
5
6
7
8
9
10
function debounce(fun, delay) {
  let timer = null
  return function(args) {
    clearTimout(timer)
    timer = setTimeout(() => {
      fun(args)
    }, delay)
  }
}

函数节流（throttle）

规定在单位时间内，只执行一次函数。如果在单位时间内多次触发函数，也只执行一次。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function throttle(fun, delay) {
  let timer, last
  return function (args) {
    const now = new Date.getTime()
    if (last && now < last + delay) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        last = now
        fun(args)
      }, delay)
    } else {
      last = now
      fun.apply(this, args)
    }
  }
}