for 循环具有延迟的函数答案

【问题标题】：for loop a function with deferredfor 循环具有延迟的函数
【发布时间】：2014-10-22 07:19:54
【问题描述】：

我有一个简单的函数来显示带有项目名称的控制台消息。像这样简单的东西：

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

}

所以，随着 i 的每一个增量，子函数将被调用，for 循环应该等到子函数完成，然后再次调用子函数......直到满足条件。

我找到了一些具有 $.when.apply 功能的解决方案，但不知道如何使用它。任何文档、示例、参考、“阅读”文章都会有所帮助！

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

【问题讨论】：

不是已经在等待完成了吗？我的意思是，据我所知，您的代码的执行应该是线性的。 as in 语句会按顺序执行，每条语句都会等到前一条语句执行完毕。
我猜不是，因为 jQuery 会对子函数进行异步调用，然后 for 循环不会在意等到子函数内的动画完成。假设您在子函数内部有一个 AJAX 调用，并且您想调用此子函数 10 次，并希望 for 循环每次都等待让调用完成，然后再次调用子函数。我说得有道理吗？

标签： jquery jquery-deferred

【解决方案1】：

这里不需要 for 循环，它不是真正适合链式动画的工具。相反，您可以使用内置的 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;
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

UPD。如果您在子函数中有一些 AJAX 调用，那就更简单了。您只需返回类似$.get(...) 的内容，它已经是一个承诺，无需使用 $.Deferred 构造新的。

【讨论】：

非常感谢您的逻辑！

【解决方案2】：

递归地做怎么样？

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

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

child(0);

【讨论】：