为何do/while循环在预期条件满足后仍无限执行？

为啥原代码会无限循环？ #

JS是单线程执行模型，setTimeout的回调函数会被放进任务队列，只有等主线程的同步代码全部执行完，才会去处理队列里的回调。你写的do {} while(timer !== timerLength)是个死循环，会一直霸占主线程，setTimeout的回调根本没机会执行，timer永远是0，循环自然停不下来。

正确实现：用Promise+async/await（最推荐） #

要实现「至少延迟1秒，同时等待请求完成」，得把异步操作结合起来——同时启动两个任务：一个等1秒，一个发请求，等两者都完成后再执行后续逻辑。

async function fetchWithMinDelay() {
  const minDelay = 1000;
  // 开启一个1秒的延迟任务
  const delayTask = new Promise(resolve => setTimeout(resolve, minDelay));
  
  // 同时发起fetch请求
  const fetchTask = fetch('你的请求地址')
    .then(res => res.json()) // 根据需求处理响应格式
    .catch(err => {
      console.error('请求出错:', err);
      throw err; // 传递错误，方便后续捕获处理
    });
  
  // 等待两个任务都完成：要么请求完成且已过1秒，要么等够1秒再等请求完成
  await Promise.all([delayTask, fetchTask]);
  
  // 此处代码满足「至少延迟1秒」要求，执行后续逻辑
  console.log('开始处理后续业务');
}

// 调用函数即可
fetchWithMinDelay();

另一种写法：手动计算耗时 #

如果不想用async/await，也可以手动计算请求耗时，不足1秒就补充延迟：

const minDelay = 1000;
const startTime = Date.now();

fetch('你的请求地址')
  .then(res => res.json())
  .then(data => {
    const usedTime = Date.now() - startTime;
    // 计算需要额外等待的时间，最少等待0秒（即无需等待）
    const waitTime = Math.max(0, minDelay - usedTime);
    
    setTimeout(() => {
      // 此处代码必然在至少1秒后执行
      console.log('获取到数据:', data);
      // 编写后续业务逻辑
    }, waitTime);
  })
  .catch(err => console.error('请求失败:', err));

关键提醒 #

• 绝对不要用同步循环等待异步操作，会直接卡死页面，严重影响用户体验
• JS的异步机制（Promise、async/await）就是用来处理这类「多任务等待」场景的，别硬写同步循环
• Promise.all可以让我们同时等待多个异步任务，完美匹配「至少延迟1秒+等待请求完成」的需求

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