如何在单个Click事件中按顺序执行多个JavaScript函数？

情况1：三个函数都是同步函数 #

完全不需要async/await，直接在点击事件处理函数里按顺序调用即可，逻辑简单直接：

const handleClick = () => {
  saveData();
  clearData();
  loadData();
};

// 在JSX中绑定事件
<button onClick={handleClick}>执行操作</button>

同步函数会严格按照代码书写顺序依次执行，前一个函数执行完毕才会触发下一个。

情况2：函数包含异步操作（比如API请求、Promise处理） #

这种情况下必须用异步控制方案保证顺序，否则三个异步函数会并行触发，无法达到指定的执行顺序。推荐两种方案：

方案一：async/await（直观易读，优先推荐）

把点击事件处理函数声明为async，每个异步函数前加await，确保前一个异步操作完成后再执行下一个：

const handleClick = async () => {
  try {
    await saveData();
    await clearData();
    await loadData();
  } catch (error) {
    // 处理任意一步出现的错误，比如提示用户操作失败
    console.error('操作执行失败:', error);
  }
};

<button onClick={handleClick}>执行操作</button>

添加try/catch是为了捕获异步过程中可能出现的错误，避免页面出现未处理的Promise异常。

方案二：Promise链式调用

如果不想使用async/await，也可以用Promise的then链式调用实现相同效果：

const handleClick = () => {
  saveData()
    .then(() => clearData())
    .then(() => loadData())
    .catch(error => {
      console.error('操作执行失败:', error);
    });
};

<button onClick={handleClick}>执行操作</button>

总结：同步函数直接顺序调用；异步函数必须用async/await或Promise链来保证执行顺序，其中async/await的代码可读性更高，是优先选择的方案。

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