如何通过回调实现函数完成后调用其他函数？规避回调地狱

原始代码问题 #

你当前的两个函数调用逻辑完全固定，嵌套在动画的complete回调里，灵活性极差：

scrollText 函数 #

function scrollText(p1, p2) {
   // Do stuff

   anime({
   // key-value pairs
   complete: function(anim) {
      showPopup(p3, p4, p5);
   }
   });
}

showPopup 函数 #

function showPopup(p3, p4, p5) {
   // Do stuff

   anime({
   // key-value pairs
   complete: function(anim) {
      ShoutLoud(p6, p7);
   }
   });
}

问题点很明显：scrollText跑完动画只能调showPopup，showPopup跑完只能调ShoutLoud，参数也没法动态调整，还陷入了回调嵌套的泥潭。

灵活解决方案：Promise化动画 + async/await #

核心思路是把anime动画包装成Promise，用async/await实现线性的异步控制，完全摆脱固定回调的束缚。

第一步：封装Promise版动画函数 #

先写一个通用的动画包装函数，把anime的回调逻辑转换成Promise：

function animate(options) {
  return new Promise(resolve => {
    anime({
      ...options,
      complete: anim => resolve(anim)
    });
  });
}

第二步：改造原有函数 #

让scrollText和showPopup返回Promise，并且只负责自己的逻辑和参数计算，不固定后续调用的函数：

改造后的scrollText

async function scrollText(p1, p2) {
  // 这里可以提前根据p1、p2计算后续需要的参数，不用塞在回调里
  const popupParams = {
    p3: `计算好的参数${p1}`,
    p4: `动态参数${p2}`,
    p5: getDynamicParam() // 比如根据用户交互获取的参数
  };

  // 等待动画完成
  await animate({
    // 原有的动画key-value配置
  });

  // 返回计算好的参数，让调用者决定后续操作
  return popupParams;
}

改造后的showPopup

async function showPopup(p3, p4, p5) {
  // 提前计算后续可能用到的参数
  const actionParams = {
    p6: processParam(p3),
    p7: getUserInput(p5) // 动态获取用户交互参数
  };

  await animate({
    // 原有的动画key-value配置
  });

  return actionParams;
}

第三步：自由组合调用逻辑 #

现在你可以根据场景任意搭配调用顺序和后续操作，完全不受固定回调限制：

场景1：还原原有调用逻辑

async function runOriginalFlow() {
  const popupParams = await scrollText('初始参数1', '初始参数2');
  const actionParams = await showPopup(popupParams.p3, popupParams.p4, popupParams.p5);
  ShoutLoud(actionParams.p6, actionParams.p7);
}

场景2：更换后续调用函数

async function runCustomFlow() {
  const popupParams = await scrollText('初始参数1', '初始参数2');
  const actionParams = await showPopup(popupParams.p3, popupParams.p4, popupParams.p5);
  // 换成任意需要的函数
  PlayNotification(actionParams.p6);
}

场景3：不需要后续回调

async function runSimpleFlow() {
  await scrollText('初始参数1', '初始参数2');
  // 动画完成后直接执行其他独立逻辑，或者啥都不做
  updatePageState();
}

场景4：动态决定后续操作

还可以把后续逻辑作为可选参数传入，进一步提升灵活性：

async function scrollText(p1, p2, onComplete) {
  const popupParams = {
    p3: `计算好的参数${p1}`,
    p4: `动态参数${p2}`,
    p5: getDynamicParam()
  };

  await animate({ /* 动画配置 */ });

  // 如果传入了回调，就执行，否则跳过
  if (typeof onComplete === 'function') {
    await onComplete(popupParams);
  }

  return popupParams;
}

// 使用示例：根据用户交互动态选择后续操作
scrollText('p1', 'p2', async (params) => {
  const actionParams = await showPopup(params.p3, params.p4, params.p5);
  if (userWantsShout()) {
    ShoutLoud(actionParams.p6, actionParams.p7);
  } else {
    SendMessage(actionParams.p6);
  }
});

方案优势 #

• 完全摆脱回调地狱，代码线性执行，可读性拉满
• 参数可以提前计算，不用堆积在回调函数里
• 后续操作完全由调用者决定，想换就换，不想调用就跳过
• 基于Promise和async/await，异步逻辑清晰可控

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