在继续循环之前完成运行功能

Question

我希望FOR循环中的函数在继续执行下一个代码之前完成运行，但是我无法使其正常工作。

在弹出警报窗口“ Lucky you”之前，它应该淡入淡出文本“ Result”，但是在看到文本之前，我会先看到警报窗口循环。 我不知道我在做什么错。

HTML:
<div id="quotes" style="display: none;">Result</div>

Javascript:
function showNextQuote() {
    $("#quotes").fadeIn(2000).delay(2000).fadeOut(2000);
}

for (i = 1; i < 4; i++){
    showNextQuote(); alert("Lucky you");
};

Answer 1

由于这些操作是异步的，因此您无法在它们运行时阻止处理。 而是给他们传递一个函数，使其在完成时执行（称为回调）。 因此，像这样链接它们看起来更像是递归函数而不是循环。

（尽管这在技术上并不是真正的递归，因为异步操作没有建立堆栈。尽管在语义/逻辑上，它至少在函数结构上与尾递归非常相似。）

像这样：

function showNextQuote(iteration) {
  // terminating condition
  if (iteration > 4) {
    return;
  }

  // recurse
  $("#quotes").fadeIn(2000).delay(2000).fadeOut(2000, function () {
    alert("Lucky you");
    showNextQuote(iteration + 1);
  });
}

showNextQuote(1);

这是对函数的定义，该函数在内部将对自身的引用作为对fadeOut的回调。 每个回调将iteration值加1。然后在定义函数后，使用初始迭代值1对其进行调用。

Answer 2

如评论中所述，JavaScript无法循环执行此操作，因为fadeIn ， delay和fadeOut都是异步的。

这样的事情应该起作用：

function showNextQuote(n) {
  if (n > 0) {
    $("#quotes").fadeIn(2000).delay(2000).fadeOut(2000, function() {
      alert("Lucky you");
      showNextQuote(n - 1);
    });
  }
}
showNextQuote(4);