Question

我有一个简单的功能来显示带有项目名称的控制台消息。简单的事情：

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功能的解决方案，但无法确定如何使用它。任何文档，样本，参考，阅读＆＃39;文章会有所帮助！

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

Answer 1

你在这里不需要循环，它不是链接动画的正确工具。相反，您可以使用内置的jQuery.Deferred对象。以下是如何使用它的示例。正如您所看到的，您需要做的是使动画函数child返回延迟对象。之后，您可以使用其then方法来决定是否需要再次拨打child，直到array包含元素。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

UPD。如果你在子功能中有一些AJAX调用，它甚至更简单。您只需返回类似$.get(...)的内容，它已经是一个承诺，无需使用$ .Deferred构建新的。

Answer 2

如何递归地执行此操作？

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

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

child(0);

for循环一个带延迟的函数

2 个答案: