消抖(dobounce)与节流(throttle)

发表于 | 分类于 | 评论数： | 阅读次数：

消抖

在一个时间段内只能触发一次,如果在这个时间段内再次触发则重新计时.
使用场景:用户 input 输入完成以后进行操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let timeout: null | number = null;
function debounce(
  fun: Function,
  wait: number = 500,
  immdiate: boolean = false
): void {
  // 如果有计时器则清空
  timeout !== null && clearTimeout(timeout);
  //立即触发
  if (immdiate) {
    !timeout && fun();
    timeout = setTimeout(() => {
      timeout = null;
    }, wait);
  }
  //wait 结束后触发
  else {
    timeout = setTimeout(() => {
      fun();
    }, wait);
  }
}
export default debounce;

节流

一个时间段内只能触发一次
使用场景: window resize触发动作,视频播放拖动进度条…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let timer: number;
let flag: boolean;
function throttle(
  func: Function,
  wait: number = 500,
  immediate: boolean = false
): void {
  if (immediate) {
    if (!flag) {
      func();
      flag = true;
      timer = setTimeout(() => {
        flag = false;
      }, wait);
    }
  } else {
    if (!flag) {
      flag = true;
      timer = setTimeout(() => {
        func();
        flag = false;
      }, wait);
    }
  }
}
export default throttle;
thank u !