ReactJS中监听loading状态实现慢网提示定时器的问题排查

你的代码问题出在没有正确清理之前创建的定时器：

当loading为true时，你创建了一个5秒的定时器，此时函数里的if (!loading)判断不成立，定时器不会被清除；等loading变成false时，useEffect会重新执行，这时候你又新建了一个定时器，然后立刻清除这个新的，但第一次创建的那个定时器还在后台运行，到时间就会弹出toast。

正确实现方式 #

利用useEffect的清理函数（返回的函数）来处理定时器的清除，这是React中处理这类副作用的标准做法：

useEffect(() => {
  let timerId;
  // 仅在加载状态时启动定时器
  if (loading) {
    timerId = setTimeout(() => {
      // 这里编写显示toast的逻辑
      alert("网络较慢，请您耐心等待");
    }, 5000);
  }

  // 清理函数：当loading状态变化或组件卸载时，清除已存在的定时器
  return () => {
    clearTimeout(timerId);
  };
}, [loading]);

逻辑说明 #

• 当loading变为true，启动5秒定时器；
• 如果在5秒内loading切换为false，清理函数会立即执行，关掉定时器，避免toast误触发；
• 只有当loading状态持续满5秒，定时器才会触发toast提示。

内容的提问来源于stack exchange，提问作者Owenn