如何通过回调在其他函数上完成任务时调用函数？

Question

我有一个名为

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(p6, p7)

完成。

此时结构是不同刚性的。

我可能不会总是在

scrollText()

内打电话给

showPopup()

。有时，我可能会调用

ShoutLoud()

或其他函数。

此外，参数将是动态的，并在运行时根据用户交互传递。

回调函数可能并不总是被调用，因此它是可选的。

我如何实现这一目标？

我可以在完整的内部进行参数计算，但这会将所有交互的所有计算的代码放在完整的内部。

我想做这样的事情：

function scrollText(p1, p2, `showPopup(p3, p4, p5, ShoutLoud(p6, p7))`) {
   // Do stuff

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

这正在成为回调地狱。我认为从长远来看它是不可维护的。有更好的选择吗？

Answer 1

将回调函数作为额外参数传递给您的函数：

function scrollText(p1, p2, complete) {
  // Do stuff
  anime({
    // Key-value pairs
    complete
  });
}
function showPopup(p3, p4, p5, complete) {
  // Do stuff
  anime({
    // Key-value pairs
    complete
  });
}

然后你可以像这样调用它们

scrollText(p1, p2, () =>
  showPopup(p3, p4, p5, () =>
    ShoutLoud(p6, p7)
  )
)