网页最小化不执行定时器：js技巧揭秘

前端

2023-12-19 00:44:46

在前端开发中，定时器是一种非常常用的工具。它允许我们以编程方式在特定时间间隔或特定事件触发时执行任务。定时器有两种类型：setTimeout() 和setInterval() 。

setTimeout() ：在指定的时间延迟后执行一次任务。
setInterval() ：在指定的时间间隔内重复执行任务，直到被清除。

定时器在很多场景下都非常有用，比如：

创建动画
轮询数据
在特定时间触发事件

然而，有时我们可能希望在页面最小化或不可见时停止定时器。这是因为在这些情况下，继续运行定时器会浪费资源，而且可能会导致性能问题。

为了解决这个问题，我们可以利用useEffect 返回清理副作用函数的技巧。useEffect 是React中的一个钩子，它允许我们在组件挂载和卸载时执行一些特定的副作用操作。

useEffect 钩子接收两个参数：

回调函数 ：该函数将在组件挂载和卸载时执行。
依赖项数组 ：该数组中的值如果发生变化，useEffect 钩子就会重新执行。

我们可以利用useEffect 钩子来实现如下逻辑：

const useInterval = (callback, delay) => {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    const tick = () => {
      savedCallback.current();
    }
    if (delay !== null) {
      const id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}