React中setInterval无法终止：设置setIsRunning(false)仍持续执行

问题根源 #

你的代码存在两个核心问题：

1. 闭包捕获旧值：setInterval的回调形成了闭包，捕获的是组件第一次渲染时的val（初始值0）和isRunning（初始值true）。即使组件后续渲染中val不断更新，回调里的val始终是0，导致if (val <= 100)永远成立，永远不会进入else分支触发停止逻辑；哪怕手动调用setIsRunning(false)，回调里的isRunning还是true，定时器会继续执行。
2. 定时器未被正确清除：当isRunning变为false时，新的useEffect执行进入else分支，但此时的intervalId是undefined，清理函数clearInterval(intervalId)无法清除之前创建的定时器。

解决方案（不将val加入useEffect依赖） #

下面提供两种可行方案，均满足你的需求：

方案一：利用useState的函数式更新获取最新值

通过setval的函数式更新，直接拿到当前最新的val值，不需要将val加入依赖数组：

import { useState, useEffect, useRef } from 'react'

function YourComponent() {
  const [val, setval] = useState(0)
  const [isRunning, setIsRunning] = useState(true)
  const intervalRef = useRef(null) // 用ref保存定时器ID，方便全局清除

  useEffect(() => {
    if (isRunning) {
      intervalRef.current = setInterval(() => {
        setval(prevVal => {
          // 在这里获取最新的prevVal，无需依赖val
          if (prevVal >= 100) {
            console.log('call')
            setIsRunning(false)
            clearInterval(intervalRef.current) // 直接清除定时器
            return prevVal // 停止更新val
          }
          console.log('running')
          return prevVal + 5
        })
      }, 50)
    } else {
      console.log('final call')
      clearInterval(intervalRef.current) // 双重保险，确保定时器被清除
    }

    // 组件卸载或isRunning变化时自动清除定时器
    return () => clearInterval(intervalRef.current)
  }, [isRunning])

  return <div>Current Value: {val}</div>
}

方案二：用useRef跟踪val的最新值

通过useRef同步val的最新值，让定时器回调能访问到实时的val：

import { useState, useEffect, useRef } from 'react'

function YourComponent() {
  const [val, setval] = useState(0)
  const [isRunning, setIsRunning] = useState(true)
  const intervalRef = useRef(null)
  const valRef = useRef(val) // 跟踪val的最新值

  // 同步val到valRef，确保ref始终保存最新值
  useEffect(() => {
    valRef.current = val
  }, [val])

  useEffect(() => {
    if (isRunning) {
      intervalRef.current = setInterval(() => {
        if (valRef.current <= 100) {
          setval(t => t + 5)
        } else {
          console.log('call')
          setIsRunning(false)
          clearInterval(intervalRef.current)
        }
        console.log('running')
      }, 50)
    } else {
      console.log('final call')
      clearInterval(intervalRef.current)
    }

    return () => clearInterval(intervalRef.current)
  }, [isRunning])

  return <div>Current Value: {val}</div>
}

关键说明 #

• 两种方案都通过useRef保存定时器ID，确保在任何地方都能正确清除定时器。
• 方案一无需额外同步状态，代码更简洁；方案二更直观，适合需要在回调中多次访问最新val的场景。

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