如何让第二个函数等待第一个函数执行完成？语法求助

首先看你的两个函数：rr里的DOM修改和数组操作都是同步执行的——这类代码会从上到下依次完成，不会出现“还没做完就跳去执行下一个函数”的情况。所以如果只是单纯想让reset在rr执行完毕后运行，直接按顺序调用就可以：

// 先执行rr的全部操作，完成后再运行reset
rr();
reset();

但如果你之后打算给rr加入异步操作（比如定时器、API请求、DOM动画这类需要等待的任务），那就要用异步处理的语法了，下面是几种常见的方案：

方案1：使用回调函数 #

给rr添加一个回调参数，在rr的所有操作（包括异步操作）完成后调用这个回调：

// 修改rr，加入回调参数
function rr(callback) {
  gr1.innerText = niz.splice(niz[Math.floor(Math.random()*niz.length)],1)
  gr2.innerText = niz.splice(niz[Math.floor(Math.random()*niz.length)],1)
  dl1.innerText = niz.splice(niz[Math.floor(Math.random()*niz.length)],1)
  dl2.innerText = niz.splice(niz[Math.floor(Math.random()*niz.length)],1)
  
  // 如果之后加了异步操作（比如定时器），要把回调放在异步逻辑的内部
  // setTimeout(() => { callback(); }, 1000);
  
  // 当前同步场景下，直接调用回调
  callback();
}

// 调用时把reset作为回调传进去
rr(reset);

方案2：使用Promise和async/await（更现代的写法） #

把rr改成返回Promise的函数，再用async/await语法来等待它执行完成：

// 把rr改为返回Promise的函数
function rr() {
  return new Promise((resolve) => {
    gr1.innerText = niz.splice(niz[Math.floor(Math.random()*niz.length)],1)
    gr2.innerText = niz.splice(niz[Math.floor(Math.random()*niz.length)],1)
    dl1.innerText = niz.splice(niz[Math.floor(Math.random()*niz.length)],1)
    dl2.innerText = niz.splice(niz[Math.floor(Math.random()*niz.length)],1)
    
    // 如果有异步操作，把resolve放在异步逻辑的回调里
    // setTimeout(() => { resolve(); }, 1000);
    
    // 同步场景下直接标记任务完成
    resolve();
  });
}

// 用async函数包裹调用逻辑
async function runTasks() {
  await rr(); // 等待rr的所有操作完成
  reset(); // 再执行reset
}

// 启动任务
runTasks();

补充说明 #

如果你的rr函数一直都是同步操作，那直接顺序调用的方式就完全够用——同步代码本身就是按顺序执行的，前一个函数的所有语句执行完毕后，才会执行下一个函数的代码。只有当函数里包含异步操作时，才需要用到回调、Promise这类异步处理语法。

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