React如何实现按用户选择的间隔时长定时执行指定函数

问题根因 #

你的原有实现存在4个核心问题：

• useEffect没有指定依赖数组，组件每次渲染都会生成新的定时器，最终会同时运行大量重复定时器导致逻辑完全混乱
• 使用setTimeout仅能触发一次，无法实现每隔固定间隔重复执行的需求
• 没有添加定时器清理逻辑，切换间隔、关闭功能或是组件卸载时，旧的定时器不会被销毁，会导致内存泄漏和逻辑异常
• setTimeout的延迟时间在实例创建时就已经固定，后续修改reload变量不会对已经创建的定时器产生任何影响

正确实现 #

先把时间间隔配置抽成映射表，后续要新增间隔选项直接修改配置即可：

import { useState, useEffect } from 'react'

// 时间间隔配置，单位为毫秒
const INTERVAL_MAP = {
  off: null,
  'one minute': 60 * 1000,
  'two minutes': 120 * 1000
}

function YourComponent() {
  const [runFunctionTime, setRunFunctionTime] = useState('off')

  useEffect(() => {
    const interval = INTERVAL_MAP[runFunctionTime]
    // 选择关闭时不创建定时器
    if (!interval) return

    // 创建周期执行的定时器
    const timer = setInterval(() => {
      RunFunction() // 替换为你要执行的目标函数
    }, interval)

    // 清理函数：依赖变化、组件卸载时销毁旧定时器
    return () => clearInterval(timer)
  }, [runFunctionTime]) // 仅当间隔选择变更时重新运行effect

  return (
    <select value={runFunctionTime} onChange={e => setRunFunctionTime(e.target.value)}>
      <option value='off'>Off</option>
      <option value='one minute'>One Minute</option>
      <option value='two minutes'>Two Minutes</option>
    </select>
  )
}

可选优化 #

如果需要用户切换到对应间隔后立即执行一次目标函数，不需要等第一个间隔走完才触发，只需要在创建定时器后立即调用一次目标函数即可：

const timer = setInterval(() => {
  RunFunction()
}, interval)
// 新增以下一行，切换后立即执行一次
RunFunction()

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