zhang
2023-10-23 87224715c3983227866f148d858276c1234f77e0
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// cancelAnimationFrame
export const cancelAnimationFrame = window.cancelAnimationFrame;
// 使用 requestAnimationFrame 模拟 setTimeout 和 setInterval
export function rafTimeout(fn: Function, delay = 0, interval = false): object {
  const requestAnimationFrame =
    typeof window !== 'undefined' ? window.requestAnimationFrame : () => {};
  let start: any = null;
  function timeElapse(timestamp: number) {
    /*
      timestamp参数:与performance.now()的返回值相同,它表示requestAnimationFrame() 开始去执行回调函数的时刻
    */
    if (!start) {
      start = timestamp;
    }
    const elapsed = timestamp - start;
    if (elapsed >= delay) {
      fn(); // 执行目标函数func
      if (interval) {
        // 使用间歇调用
        start = null;
        raf.id = requestAnimationFrame(timeElapse);
      }
    } else {
      raf.id = requestAnimationFrame(timeElapse);
    }
  }
  const raf = {
    // 引用类型保存,方便获取 requestAnimationFrame()方法返回的 ID.
    id: requestAnimationFrame(timeElapse),
  };
  return raf;
}
// 用于取消 rafTimeout 函数
export function cancelRaf(raf: { id: number }): void {
  const cancelAnimationFrame =
    typeof window !== 'undefined' ? window.cancelAnimationFrame : () => {};
  if (raf && raf.id) {
    cancelAnimationFrame(raf.id);
  }
}