定时器使用时的一败涂地

2023-01-25 23:21:46

定时器的陷阱：清除定时器，避免灾难

时钟的滴答声提醒着我们生命流逝的必然性，同样，计时器的滴答声指示着任务执行的倒计时。在前端开发中，定时器是一种无处不在的工具，用于处理各种时间相关任务。然而，我们有时会忽视定时器的隐藏陷阱，而这些陷阱可能会导致恼人的问题。

定时器的陷阱：错失的清除

在前端开发中，有一个约定俗成的惯例：当页面离开时，清除定时器。这个惯例源于定时器是异步执行的，而页面离开是一个同步操作。当页面离开时，定时器可能仍在执行，或已被放入事件循环等待执行。此时清除定时器并不能阻止它执行。

让我们通过一个例子来理解这个问题。假设我们在组件中定义了一个定时器，每秒输出一个数字。当我们点击按钮卸载组件时，定时器仍然会继续执行，直到页面完全卸载为止。

import React, { useEffect } from "react";

const MyComponent = () => {
  useEffect(() => {
    const timerId = setInterval(() => {
      console.log("Hello world!");
    }, 1000);

    return () => {
      clearInterval(timerId);
    };
  }, []);

  return (
    <div>
      <button onClick={() => {卸载组件}}>卸载组件</button>
    </div>
  );
};

export default MyComponent;

为了避免这种情况，我们需要在页面离开时，先判断定时器是否正在执行，如果正在执行，则等待它执行完毕后再清除它。

import React, { useEffect, useRef } from "react";

const MyComponent = () => {
  const timerIdRef = useRef();

  useEffect(() => {
    timerIdRef.current = setInterval(() => {
      console.log("Hello world!");
    }, 1000);

    return () => {
      if (timerIdRef.current) {
        clearInterval(timerIdRef.current);
      }
    };
  }, []);

  return (
    <div>
      <button onClick={() => {卸载组件}}>卸载组件</button>
    </div>
  );
};

export default MyComponent;