在 React 中，若需按顺序执行多个依赖时间的动画函数（如基于 setTimeout 的逐帧渲染），应将动画逻辑封装为 Promise，并利用 Promise.all() 和 .then() 实现可靠的链式调用，避免竞态与时间估算偏差。
在 react 中，若需按顺序执行多个依赖时间的动画函数（如基于 `settimeout` 的逐帧渲染），应将动画逻辑封装为 promise，并利用 `promise.all()` 和 `.then()` 实现可靠的链式调用，避免竞态与时间估算偏差。
在 React 应用中实现动画的串行执行，关键在于让异步操作具备可等待性。原始代码中直接调用 animate() 后立即执行第二个 animate()，或依赖固定 setTimeout(1000)，均不可靠：前者因 setTimeout 是非阻塞的而并发执行；后者则硬编码延迟，易受动画实际时长、设备性能或状态更新批次影响。
解决方案是将 animate 函数改造为返回 Promise 的异步函数，确保其“完成”语义明确——即所有帧更新均已调度并触发对应的 React 状态更新（注意：此处的“完成”指所有 setTimeout 回调已注册并执行完毕，而非 DOM 渲染完成，但对多数 UI 动画已足够）。
以下是优化后的 animate 实现：
const animate = (nodes: Node[]) => {
const promises: Promise<void>[] = [];
for (let i = 0; i ((resolve) => {
setTimeout(() => {
const node = nodes[i];
setTable((prev) => {
// 深拷贝 grid（避免直接修改）
const newArray = prev.grid.map(row => [...row]);
// 构建新 grid：仅翻转目标节点的 isAnimate 状态
const updatedGrid = newArray.map((items) =>
items.map((item) => {
const { row, col } = item.pos;
return row === node.row && col === node.col
? { ...item, isAnimate: !item.isAnimate }
: item;
})
);
resolve(); // ✅ 此帧更新完成，Promise 解析
return {
...prev,
grid: updatedGrid
};
});
}, 10 * i); // 每帧间隔 10ms，形成流畅动画序列
})
);
}
// 返回 Promise.all，确保所有帧更新全部完成
return Promise.all(promises);
};</void>
随后，在按钮点击事件中使用 .then() 链式调用：
Orderly Sdk React Hooks
下载
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
<button onclick="{()"> {
animate(nodesVisitedInOrder)
.then(() => animate(path))
.catch(err => console.error("Animation sequence failed:", err));
}}
>
Start Animation Sequence
</button>
✅ 优势说明：
-
精确时序控制：不再依赖猜测的
1000ms，而是真实等待前序动画所有帧执行完毕； -
错误可捕获：通过
.catch()可统一处理动画异常（如节点数据异常导致undefined访问）； -
可扩展性强：支持任意数量动画串联，例如
animate(A).then(() => animate(B)).then(() => animate(C))； -
符合 React 更新机制：每个
setTable调用仍遵循 React 批量更新策略，性能无损。
⚠️ 注意事项：
- 若需严格等待 CSS 动画结束（如
animationend事件），应改用useRef监听 DOM 元素事件，而非setTimeout； -
Promise.all(promises)确保所有帧按序启动，但不保证 React 渲染完成——如需 DOM 就绪后操作（如滚动到某节点），可结合useEffect或requestAnimationFrame进一步增强； - 对于超长节点列表（如 >1000 个），大量
setTimeout可能引发性能问题，此时建议分片（chunking）或 Web Worker 卸载计算。
通过 Promise 化动画函数，你获得了声明式、可组合、易测试的异步流程控制能力——这是构建健壮 React 动画体验的核心实践之一。
