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);

在继续循环之前完成运行函数

2 个答案: