JavaScript中如何让caller函数等待点击事件后再执行multiply？

嘿，这个问题本质就是要控制异步操作的执行顺序对吧？因为按钮点击是异步事件，原代码里caller会直接跳过等待，先执行multiply。下面给你两种可行的实现方式，优先推荐第一种，扩展性更好：

方案一：Promise + async/await（推荐） #

这种方式用ES6的异步语法，代码可读性和扩展性都很强，适合后续可能增加更多异步逻辑的场景。

首先先修正原代码里的小问题：原函数里的变量没声明会变成全局变量，而且调用sum和multiply时没传参数会得到NaN，这些都一起调整了：

// 修正sum函数：添加变量声明，避免全局污染
function sum(a, b){
  const res1 = a + b;
  return res1;
}

// 修正multiply函数：添加变量声明
function multiply(x, y){
  const res2 = x * y;
  console.log(res2);
}

// 重写caller为async函数，实现等待逻辑
async function caller(){
  // 把按钮点击事件包装成Promise，resolve代表点击完成
  const waitForButtonClick = new Promise((resolve) => {
    button.addEventListener('click', function(){
      // 这里传入具体参数，你可以根据实际需求修改
      const z = sum(2, 3);
      console.log(z);
      // 点击完成后，标记Promise完成
      resolve();
    }, { once: true }); // 只监听一次点击，避免重复触发后续逻辑
  });

  // 暂停caller的执行，直到按钮被点击
  await waitForButtonClick;

  // 点击完成后，再调用multiply
  multiply(4, 5);
}

关键细节说明 #

• Promise包装异步事件：把按钮点击这个异步动作包装成Promise，当点击发生时调用resolve()，告诉程序“异步操作完成了，可以继续了”。
• async/await控制流程：给caller加上async关键字，用await等待Promise完成，这样后面的multiply就会严格在点击事件之后执行。
• { once: true }：这个选项确保按钮只被监听一次，如果你需要支持多次点击触发逻辑，可以去掉，但要注意后续逻辑的合理性。
• 变量声明修正：原代码里的res1、res2、z都没有声明，会成为全局变量，这是JS里的不良实践，所以加上了const声明。

方案二：直接用回调函数（简单场景适用） #

如果你的逻辑很简单，不需要后续扩展更多异步操作，也可以直接把multiply放在点击事件的回调里，这样天然就能保证顺序：

function sum(a, b){
  const res1 = a + b;
  return res1;
}

function multiply(x, y){
  const res2 = x * y;
  console.log(res2);
}

function caller(){
  button.addEventListener('click', function(){
    const z = sum(2, 3);
    console.log(z);
    // 点击完成后立刻调用multiply
    multiply(4, 5);
  }, { once: true });
}

这种写法更简洁，但如果后续有多个异步步骤需要按顺序执行，Promise+async/await的写法会更清晰，不会陷入“回调地狱”。

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