函数节流与防抖

发表于 更新于 分类于

大纲

前言

函数节流
给定时间间隔内只执行一次

函数防抖
在连续尝试触发的情况，只有触发的时间间隔大于给定时间才会真正触发。

函数节流

正如其名，就是为了节流。
在实现同样的功能下，尽量使用最少的资源，达到节约的效果！
比如，在绑定一个滚动事件，滚轴的位置有一点变化都会触发。然而，人眼可以识别的只有60帧每秒，甚至30帧就够了！
所以，让触发频率实在是浪费资源！

先来实现一个节流函数的构造器！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function throttleCreator(_cb, _time) {
  let cacheTime = 0;
  return function(...rest) {
    const now = Date.now();
    if (now - cacheTime  > _time) {
      cacheTime = now;
      _cb(...rest);
    }
  }
}

const bodyEle = document.body;
bodyEle.onscroll = throttleCreator(function() {
  console.log(this);
}, 200);

函数防抖

意义在于防止多次触发无意义操作

1
2
3
4
5
6
7
8
9
function debounceCreator(_cb, _time) {
  return function(...rest) {
    const ctx = this;
    clearTimeout(_cb.id);
    _cb.id = setTimeout(() => {
      _cb.call(ctx, ...rest);
    }, _time);
  }
}