本文讲解如何在 React 中根据数组中对应索引的数值，动态改变 setTimeout 或 setInterval 的执行间隔，解决因闭包导致的状态 stale 问题，并提供可复用、可清理的安全实现方案。
本文讲解如何在 react 中根据数组中对应索引的数值，动态改变 `settimeout` 或 `setinterval` 的执行间隔，解决因闭包导致的状态 stale 问题，并提供可复用、可清理的安全实现方案。
在 React 中直接使用 setInterval 并依赖当前 state（如 currentLocationIndex）计算延迟时间，会导致闭包捕获初始 state 值的问题——即无论 currentLocationIndex 如何更新，setInterval 回调内部始终读取的是首次渲染时的 speed[0]（本例中为 1），因此间隔恒为 1000ms，无法随索引变化动态切换为 5000ms、6000ms 等。
✅ 正确解法是：弃用 setInterval，改用链式 setTimeout + useEffect 依赖追踪，确保每次状态更新后都能基于最新 currentLocationIndex 计算下一次延迟。
以下是完整、健壮的实现：
import { useState, useEffect, useRef } from 'react';
function App() {
const [speed] = useState([1, 5, 6, 2, 3, 4]);
const [location] = useState([10, 20, 13, 20, 10, 2]);
const [currentLocationIndex, setCurrentLocationIndex] = useState(0);
const [isRunning, setIsRunning] = useState(false);
// 使用 useRef 存储 timeout ID，避免重复声明或闭包问题
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
// 清理函数：组件卸载或停止时清除定时器
const clearTimer = () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
timeoutRef.current = null;
}
};
// 核心逻辑：当 isRunning 或 currentLocationIndex 变化时触发
useEffect(() => {
if (!isRunning) return;
// 当到达末尾时自动停止
if (currentLocationIndex >= location.length - 1) {
setIsRunning(false);
clearTimer();
console.log('Animation completed.');
return;
}
// 计算本次延迟（单位：毫秒）
const delayMs = 1000 * speed[currentLocationIndex];
console.log(`Next step at index ${currentLocationIndex}, delay: ${delayMs}ms`);
timeoutRef.current = setTimeout(() => {
setCurrentLocationIndex(prev => prev + 1);
}, delayMs);
// 组件卸载或依赖变更前清理
return clearTimer;
}, [isRunning, currentLocationIndex, speed, location.length]);
const startAnimation = () => {
if (isRunning) return;
clearTimer(); // 确保从干净状态开始
setCurrentLocationIndex(0);
setIsRunning(true);
};
const stopAnimation = () => {
setIsRunning(false);
};
return (
<div>
<p>Current index: <strong>{currentLocationIndex}</strong></p>
<p>Current speed multiplier: <strong>{speed[currentLocationIndex]}</strong></p>
<button onClick={startAnimation} disabled={isRunning}>
{isRunning ? 'Running...' : 'Start Animation'}
</button>
<button onClick={stopAnimation} disabled={!isRunning} style={{ marginLeft: '8px' }}>
Stop
</button>
</div>
);
}
export default App;? 关键要点说明：
- ✅ 不使用 setInterval：它会持续运行并固化初始 speed[currentLocationIndex] 值；而 setTimeout 是单次、可控的，配合 useEffect 依赖更新可精准响应状态变化。
- ✅ useRef 管理定时器 ID：避免因 useEffect 重建导致的多次 clearTimeout 失效或内存泄漏。
- ✅ 依赖数组显式声明：[isRunning, currentLocationIndex, speed, location.length] 确保 effect 在必要时重执行。
- ✅ 自动边界控制与清理：到达数组末尾时自动停止，并在组件卸载或手动停止时清除定时器。
- ⚠️ 注意：speed 和 location 若需动态修改，应同样加入 useEffect 依赖项，并考虑重置逻辑。
该模式适用于地图路径动画、轮播节奏控制、分步引导等需要「逐段不同速度」的交互场景，兼顾性能、可维护性与 React 最佳实践。
