for循环功能推迟

我有一个简单的函数来显示控制台消息与项目名称。简单的像这样：for循环功能推迟

for(var i =0; i< array.length; i++) 
child(array[i]); 

var child = function(itemname){ 
console.log(itemname); 
}

这里数组的长度是动态的，它包含的值也是动态的。现在我想在子函数内部添加一些动画，并且肯定希望它在第一次被for循环调用之前完成。

我知道如何使用jQuery Deferred，并可以在完成其他调用后调用一个函数，但在这里我不知道如何调用在for循环中使用它。我不确定这是否是在这里使用的正确选项。所以，我想要做的是，

for(var i =0; i< array.length; i++) //for example 3 times 
{ 

child(i) //call child and pass the the value of i 
wait till child function completes 

}

所以，在我每一个增量，孩子函数将被调用，用于循环要等到孩子功能完成，然后再次调用子功能....直到条件得到满足。

我发现了一些具有$ .when.apply功能的解决方案，但无法确定如何使用它。任何文档，示例，参考，“阅读”文章将有所帮助！

编辑：我想，我不应该使用动画的例子。我的错。假设子函数进行ajax调用。现在，我想调用儿童功能i次，并希望循环等待每次让ajax调用完成后再调用它。这是我想多次调用的功能。没有链接。

来源

2014-10-22 sandiejat

难道它不等待已经完成？我的意思是据我所知，执行你的代码应该是线性的。因为在语句中将按顺序执行，并且每个语句将等待直到执行前一个语句。 – Zero 2014-10-22 07:29:18

我想不是，因为jQuery将对子函数进行异步调用，然后for循环将不会等待，直到子函数内部的动画完成。假设你在子函数内部有一个AJAX调用，并且你想调用这个子函数10次，并且希望for循环每次都等待让这个调用完成，然后再次调用子函数。我有道理吗？ – sandiejat 2014-10-22 07:38:08

这里不需要循环，它不是一个真正适合链接动画的工具。相反，你可以使用内置的jQuery.Deferred对象。以下是您如何使用它的一个例子。正如你可以看到你需要做的是让你的动画功能child返回延期对象。之后，您可以使用其then方法来决定是否需要再次拨打child，直到array包含元素。

var array = ['message one', 'and another', 'finally one more']; 
 

 
// Invoke child until array has elements, no loops are needed here 
 
child(array.shift()).then(function next() { 
 
    if (array.length) { 
 
     child(array.shift()).then(next); 
 
    } 
 
}); 
 

 

 
// An example of child function. 
 
// Important part here is that this function returns deferred promise 
 
// which is resolved once animation is complete. 
 
function child(i) { 
 
    var $message = $('<div class="message">' + i + '</div>'); 
 
    $message.appendTo('body'); 
 
    return $.Deferred(function() { 
 
     $message.delay(1000).fadeOut(1000, this.resolve); 
 
    }); 
 
}

.message { 
 
    padding: 20px; 
 
    background: #55E755; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

UPD。如果你在子功能中有一些AJAX调用，那就更简单了。你只需返回像这样的$.get(...)，这已经是一个承诺，不需要用$ .Deferred构建新的。

来源

2014-10-22 07:35:25 dfsq

非常感谢逻辑！ – sandiejat 2014-10-22 10:35:32

如何递归执行？

function child(i){ 
    if(i<array.length){ 
     console.log(array[i]); 
     child(i+1); 
    } 
} 

var array = ['1','2','3']; 

child(0);

来源

2014-10-22 07:26:01 roullie

for循环功能推迟

回答

相关问题