javascript - 在循环之前完成函数的运行

Question

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

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

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 调用它。