for循环具有延迟的功能 [英] for loop a function with deferred

问题描述

我有一个简单的功能来显示带有项目名称的控制台消息.简单的东西:

I have a simple function to display a console message with an item name. Something simple like:

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

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

这里数组的长度是动态的，它包含的值也是动态的.现在，我想在子函数中添加一些动画，并且绝对希望它先完成，然后再被for循环调用.

Here length of array is dynamic and so are the values it contains. Now I want to add some animation inside the child function and definitely want it to finish first before it gets called again by the for loop.

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

I know how to use jQuery Deferred and can call one function after finishing other but here I don't know how to call use it inside a for loop. I'm not sure if that's the right option to use here. So, what I want to do is,

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循环应等待直到子函数完成，然后再次调用子函数....直到满足条件为止.

So, with every increment in i, child function will be called and for loop should wait until child function is completed and then call child function again.... till the condition is met.

我找到了一些具有$ .when.apply功能的解决方案，但不知道我们如何使用它.任何文档，样本，参考资料，阅读"文章都将有所帮助！

I found some solutions with $.when.apply functionality but couldn't figure our how to use it. Any documentation, sample, reference, 'to read' article will help!

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

I guess, I shouldn't have used the example of animation. my bad. Assume that the child function makes an ajax call. Now, I want to call the child function i times and want the loop to wait every time to let the ajax call to complete before calling it again. It is the same function which I want to call more than once. no chaining.

推荐答案

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

You don't need for loop here, it's not really a right tool for chained animations. Instead you can use built in jQuery.Deferred object. Below is an example of how you can use it. As you can see what you would need to do is to make your animation function child return deferred object. After that you can use its then method to decide if you need to call child one more time, until array contains elements.

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构造新的对象.

UPD. If you have some AJAX call in child function it's even simpler. You just return something like this $.get(...), it's already a promise, no need to construct new one with $.Deferred.

这篇关于for循环具有延迟的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！