函数节流和防抖

函数节流

节流: 固定时间内只触发第一次操作

  • 举个🌰:
    1. 操作A触发, 直接执行A
    2. 来了操作B， 如果B和A的时间间隔大于等于节流间隔，从1开始
    3. 如果B和A的时间间隔小于节流间隔，设置操作B的定时器 此时timeout有值 直到B运行结束 timeout失效
    4. 来了操作C，如果timeout还在 return 如果timeout失效了 从1开始

简单的说就是 节流就是固定时间内只执行第一次的操作 已经设置好的定时器必须执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function throttle (action, delay) {
  let timeout = null
  let lastRun = 0
  return function () {
    if (timeout) {
      return
    }
    let elapsed = Date.now() - lastRun
    let context = this
    let args = arguments
    let runCallback = function () {
      lastRun = Date.now()
      timeout = false
      action.apply(context, args)
    }
    if (elapsed >= delay) {
      runCallback()
    } else {
      clearTimeout(timeout)
      timeout = setTimeout(runCallback, delay)
    }
  }
}

函数防抖

防抖：每个固定时间间隔段内执行最后一次

> 1. 操作A来了， 设置定时器
> 2. 操作B来了， 取消上一个定时器 设置B的定时器

简单的说就是操作间距少于防抖间隔的时候 使用新的定时器代替旧的 达到只执行后一次操作的作用

1
2
3
4
5
6
7
8
9
10
11
function debounce(fn, delay) {
  let timeout
  return function (...args) {
    const context = this
    const cb = function() {
      return fn.apply(context, args)
    }
    clearTimeout(timeout)
    timeout = setTimeout(cb, delay)
  }
}

小结

两者都是性能优化的选择，不同的是节流不会打破已设置好的定时器内容 防抖则会使用的新的定时器代替旧的