如何在 React.js 中创建延迟答案

【问题标题】：How to create a delay in React.js如何在 React.js 中创建延迟
【发布时间】：2022-01-01 05:36:00
【问题描述】：

我正在开发一个在 React 中可视化排序算法的网页。问题是，所有的变化都发生得太快了，庞大的阵列在不到一毫秒的时间内就组织好了。我需要一种方法来延迟算法，以便它在每次更改时保持半秒。我认为更改刷新率也可能有效。如果您认为有更好的解决方案，请告诉我！

无论哪种方式，通过 setTimouts 延迟排序算法的进度都没有奏效。既没有承诺也没有等待。

以下是我尝试过但不起作用的示例：

setTimout(() => {
  swap(b, b-1) //swap is a separate method
}, 500)

【问题讨论】：

超时或间隔会起作用，但你必须触发重新渲染，否则 React 不会显示更改。 React 还批量处理状态更改，因此如果它发生得很快，视觉效果可能会不流畅。最好的办法是直接使用 React Refs 修改 React DOM

标签： javascript arrays reactjs sorting delay

【解决方案1】：

您发布的代码将每swap 延迟 500 毫秒。但是所有这些仍然连续发生，中间没有空间。听起来您希望每个 swap 之间有一个延迟，因此排序可视化会减慢。像这样的伪代码可能会起作用：

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function sortingAlgorithm() {
  while(/*not sorted yet*/) {
    swap(b, b-1)
    await sleep(500);
  }
}

【讨论】：

我不知道该怎么感谢你。我已经坚持了这么久。谢谢你
很高兴能帮上忙。对不起，我第一次误解了这个问题。新年快乐。