介绍

节流和防抖很相似，都是对不断调用的函数的次数进行限制。
不同之处在于，

  • 节流就像是水龙头，想象一下，把水龙头扭到很小但是水滴还是一滴一滴地流下来，节流函数就是水龙头阀门，限制函数（水滴）的调用次数（滴落频率）

  • 防抖函数像是弹簧，只要人一直压着弹簧（一直触发函数），弹簧就不会伸展（函数就不被调用），当人松开的时候（不触发函数了），弹簧就伸展开来了（函数就被调用），即如果一直触发函数，以最后一次为准。

拿页面resize做例子，假设下面这个函数被节流或函数处理过：

1
2
3
window.onresize = function(){
    console.log('1')
}

它们的表现会是：

  • 节流：设定5秒内只能触发一次函数，假设20秒内一直resize,那么控制台只能看到4个 ‘1’
  • 防抖：设定倒数5秒后才触发函数resize，如果期间一直触发resize，则刷新倒数时间从头来过，直到不再触发resize，结果是控制台只能看到1个 ‘1’

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//防抖
function debounce(fn) {
  let timeout = null;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.call(this, arguments);
    }, 1000);
  };
}

let event = debounce(()=>{
  console.log('1')
})

window.onresize = event
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//节流
function throttle(fn) {
  let canRun = true;
  return function() {
    if(!canRun) {
      return;
    }
    canRun = false;
    setTimeout( () => {
      fn.call(this, arguments);
      canRun = true;
      }, 1000);
  };
}

let event = throttle(()=>{
  console.log('1')
})

window.onresize = event