如何在React应用的循环中添加休眠（sleep）功能

嘿，我明白你想在嵌套while循环里加休眠，一步步看setState后的UI变化对吧？直接用同步的sleep方法（比如while(Date.now() < start + ms);）肯定不行，因为JavaScript是单线程的，同步阻塞会让整个页面卡住，根本看不到UI更新。下面给你一个可行的异步解决方案：

步骤1：创建异步sleep函数 #

首先我们需要一个基于Promise的sleep函数，这样可以配合async/await实现非阻塞的休眠：

const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));

步骤2：改造play方法为异步函数 #

因为要使用await，我们需要把play改成async函数，同时调整循环逻辑——普通的while是同步的，必须结合await才能让每次循环等待状态更新和休眠完成：

兼容React 18+的写法（setState返回Promise） #

play = async () => {
  // 深拷贝状态数组，避免直接修改原state
  let g2 = arrayClone(this.state.gridFull);
  // 外层循环，注意condition要能正常退出
  while(yourOuterCondition) {
    // 内层循环
    while(yourInnerCondition) {
      /* 这里写你的逻辑处理代码 */

      // 等待setState完成，确保UI已经更新
      await this.setState({ 
        gridFull: g2, 
        remainingBoxes: total 
      });
      // 休眠指定毫秒数，比如500ms，你可以调整这个值
      await sleep(500);

      /* 此处进行g2或其他变量的修改... */
    }
  }
}

兼容React 17及以下版本的写法 #

如果你的React版本低于18，setState不会返回Promise，那我们可以封装一个异步的setState工具函数：

// 封装异步setState
setStateAsync = (newState) => {
  return new Promise(resolve => {
    this.setState(newState, resolve);
  });
}

// 改造后的play方法
play = async () => {
  let g2 = arrayClone(this.state.gridFull);
  while(yourOuterCondition) {
    while(yourInnerCondition) {
      /* 逻辑处理 */

      // 使用封装的异步setState
      await this.setStateAsync({ 
        gridFull: g2, 
        remainingBoxes: total 
      });
      await sleep(500);

      /* 变量修改逻辑 */
    }
  }
}

重要提醒 #

• 确保你的arrayClone是深拷贝函数，如果只是浅拷贝，修改g2会直接影响原state，导致状态混乱。
• 循环的condition一定要能正常退出，不然会陷入无限异步循环，页面可能会无响应。
• 休眠时间可以根据你的需求调整，比如300ms、1000ms都可以，找到合适的观看速度。

这样修改后，每次循环都会先完成状态更新、等待UI渲染，然后休眠一段时间，你就能清晰看到每一步的状态变化啦！

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