JavaScript如何在函数间休眠及循环内执行sleep函数？

首先，你的sleep函数本身是正确的——它通过返回一个Promise，利用setTimeout在指定毫秒数后resolve，这正是async/await语法所需的异步等待方式。问题出在你调用show函数的方式，以及代码里的一个小拼写错误，导致执行逻辑不符合预期。

先看你代码里的两个关键问题： #

1. 函数名拼写错误：show()里调用的showdiv()应该是showDiv()（JavaScript是大小写敏感的），这个错误会导致第一次调用就报错，后续逻辑完全无法执行。
2. async函数未被await调用：你用while循环直接调用show()，但show是async函数，直接调用会立即返回Promise，不会等待它执行完成。这会导致10次show几乎同时启动，所有的sleep(5000)会一起计时，最终div的显示隐藏会混乱，完全不是你预期的“显示5秒→隐藏5秒→重复10次”的串行逻辑。

修复后的正确代码 #

如果你希望10次show操作串行执行（上一次的显示隐藏完成后，再执行下一次），可以把循环改成async函数，用await调用show()：

// 修复拼写错误：showdiv() → showDiv()
async function show(){ 
  showDiv() 
  await sleep(5000) 
  hideDiv() 
  await sleep(5000) 
} 
function showDiv(){ $('div').fadeIn() } 
function hideDiv(){ $('div').fadeOut() } 
function sleep(second){ return new Promise(resolve => setTimeout(resolve, second)); } 

// 新增一个async函数来处理循环，确保串行执行
async function runShowLoop() {
  for(let i = 0; i < 10; i++) {
    await show(); // 等待当前show执行完成，再进行下一次
  }
}

// 启动循环
runShowLoop();

如果你想让10次show并行执行（所有div同时显示5秒，再同时隐藏5秒） #

那只需要修复拼写错误，同时用Promise.all来管理所有异步任务：

async function show(){ 
  showDiv() 
  await sleep(5000) 
  hideDiv() 
  await sleep(5000) 
} 
function showDiv(){ $('div').fadeIn() } 
function hideDiv(){ $('div').fadeOut() } 
function sleep(second){ return new Promise(resolve => setTimeout(resolve, second)); } 

// 并行执行，所有show同时启动
async function runParallel() {
  const promises = [];
  for(let i = 0; i < 10; i++) {
    promises.push(show());
  }
  await Promise.all(promises); // 等待所有show执行完成
}

runParallel();

核心要点总结 #

• sleep函数的实现是正确的，只要在**async函数内部用await**调用它，就能实现预期的等待效果。
• 调用async函数时，如果需要等待它执行完成，必须用await（或者用.then()处理Promise），否则会异步并发执行，无法控制顺序。
• JavaScript是大小写敏感的，函数名调用要和定义完全一致。

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