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

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

至于说注释，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); 

Answer 2

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

（虽然这不是真的技术上递归由于异步操作不建立一个堆栈。这是语义/逻辑非常相似，尾递归不过，至少在功能结构。）

东西像这样：

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调用该函数。