当满足特定条件时，如何退出带有一堆等待的 javascript 函数答案

【问题标题】：How can I quit from a javascript function with a bunch of awaits when certain condition is met当满足特定条件时，如何退出带有一堆等待的 javascript 函数
【发布时间】：2023-02-16 05:01:14
【问题描述】：

我有一个启动时带有一些动画的网站，我想添加一个跳过动画按钮。目前动画是一个有很多等待的功能，那么当单击跳过动画按钮时如何退出这个过程？事实上，我可以在每一行之间添加 if (condition === true) {return;}，但是有一些更简单的方法吗？

例如，如何在单击跳过动画按钮时立即退出此动画功能？

var skipAnimation = document.querySelector("#skip-animation");

function animation() {
  await function1();
  await function2();
  function3();
  await function4();
  function5();
}

【问题讨论】：

您可以检查单击按钮时设置的某些变量的状态，但是，如果 animation 当前是 awaiting 这些结果之一，那么您不能 - 除非每一个都在等待 functions 也检查变量的状态，并且这些函数中的任何等待函数都会这样做......等等......所以“立即”将很难

标签： javascript asynchronous

【解决方案1】：

我能想到的一种解决方案是将所有函数放入一个数组中。然后，您遍历数组并在检查条件的同时运行每个函数。

const functions = [f1, f2, f3, f4, f5];
for (function of functions) {
  if (buttonNotClicked) {
    await function();
  }
}

不幸的是，这不会像您想要的那样立即退出功能，正如@JaromandaX 所说，如果不修改动画功能本身，这可能很困难甚至不可能。

【讨论】：

你是说await function();？
@JaromandaX 我不知道我是怎么犯这个错误的。谢谢你的纠正。
谢谢，这是个好主意。自己想办法，放在下面，但也不是'immediate'

【解决方案2】：

这是我自己想的一种方式。我在每个函数之前添加了一个检查，如果满足条件则抛出异常。并在动画函数中添加try catch，处理异常。在这种情况下，它会在 skip === true 之后停止进程，但它也不像我预期的那样“立即”

skip-animation.onclick = () => {
  skip = true;
}

function func1() {
  if (skip === true) {
    throws new error("SKIP IT");
  }
}

function animation {
  try {
    await func1();
    await func2();
    func3();
  }
  catch(e) {
    if (e.message === "SKIP IT") {
      doSomething();
    } else {
      throw e;
    }
  }
}

【讨论】：