节流与防抖

  • 节流：限制触发方法的频率。
  • 防抖：限制方法的触发频率。
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
// 节流：触发func方法后的一段时间(1s)内，不能再次触发
function throttle(func: (...args: any[]) => void, delay: number = 100) {
  let lastTime = 0;
  return (...args: any[]) => {
    if (args[0] instanceof Event) {
      args[0].preventDefault();
    }
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, args)
      lastTime = now
    }
  }
}
// 防抖：触发事件后，1秒后执行func方法，1秒内再次出发时间，重置为1秒后执行
function debounce(func, delay = 1000) {
    let timer = null;
    return () => {
        if (timer) { clearTimeout(timer) }
        timer = setTimeout(() => {
            func.apply(this, arguments)
            timer = null
        }, delay)
    }
}