for循环中raphael js中回调函数的行为

Question

我正在使用Raphael JS绘制和动画两组线。第一组完成后，第二组线被绘制和动画。两组线的SVG路径字符串存储在两个不同的二维数组中：第一组行为lines[0][0]到lines[0][7]，lines[1][0]到lines[1][7]为.animate()第二组线。我在animateLines(lines[0]);//call to the animateLines() function函数中使用了一个回调函数，以便在绘制第一个集合并绘制动画后绘制第二个集合。以下是代码：

function animateLines(targetPath){ if(typeof targetPath !="undefined"){ for(var i=0;i<8;i++){ if(typeof targetPath[i] != "undefined"){ runs = paper.path(init_path).attr({'stroke':'#000000'}).animate({path:targetPath[i]},1000,function(){ animateLines(lines[1]); }) } } } }

for

代码运行正常，给出了我期望的输出。但是，我对理解回调函数的行为感到困惑 由于回调函数位于for循环内，因此每次绘制单个行时都不应调用它，而不是在完全绘制第一个集合后调用（即不是在循环完成执行后调用）？但是，由于我正在获得所需的输出，我假设，回调函数仅在整个for循环执行完后才会执行（这有点奇怪？）。 这到底发生了什么？谁能解释一下{{1}}循环中回调函数的行为？