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循環功能推遲

回答

相關問題