本文讲解如何在 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 计算下一次延迟。
以下是完整、健壮的实现：
React Native For Android 源码编译 中文WORD版
本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看
下载
?
关键要点说明：
✅
不使用 setInterval
：它会持续运行并固化初始 speed[currentLocationIndex] 值；而 setTimeout 是单次、可控的，配合 useEffect 依赖更新可精准响应状态变化。
✅
useRef 管理定时器 ID
：避免因 useEffect 重建导致的多次 clearTimeout 失效或内存泄漏。
✅
依赖数组显式声明
：[isRunning, currentLocationIndex, speed, location.length] 确保 effect 在必要时重执行。
✅
自动边界控制与清理
：到达数组末尾时自动停止，并在组件卸载或手动停止时清除定时器。
⚠️ 注意：speed 和 location 若需动态修改，应同样加入 useEffect 依赖项，并考虑重置逻辑。
该模式适用于地图路径动画、轮播节奏控制、分步引导等需要「逐段不同速度」的交互场景，兼顾性能、可维护性与 React 最佳实践。
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(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 (
Current index: {currentLocationIndex}
Current speed multiplier: {speed[currentLocationIndex]}
);
}
export default App;