Использование Jquery отложенных и цикл for для визуализации динамических данных с использованием эффектов JQuery в последовательном порядке

Question

Я хочу использовать цикл 'for' (не уменьшать метод или forEach или любой другой метод) для итерации по массиву динамических данных (количество значений может меняться) и использовать Jquery отложенные для отображения каждого значения с использованием эффектов JQuery в последовательном порядке (эффект должен завершиться до отображения следующего элемента массива)

Вот блок кода, который работает при использовании статического кода без «для» петли - как вы можете видеть 1 значение утрачено в в то время:

<div id="container"></div> 

<script> 
//I want to be able to process data in an array like this -- but currently this array is not being used below 
testdata = [1,2,3,4]; 


var fadeIn1 = function(){ 
    console.log("started fade in 1"); 
    var promise = $("<h1>test 1</h1>").hide().appendTo("#container").fadeIn(2000); 
    return promise.promise(); 
}; 

var fadeIn2 = function(){ 
    console.log("started fade in 2"); 
    var promise = $("<h1>test 2</h1>").hide().appendTo("#container").fadeIn(2000); 
    return promise.promise(); 
}; 

var fadeIn3 = function(){ 
    console.log("started fade in 3"); 
    var promise = $("<h1>test 3</h1>").hide().appendTo("#container").fadeIn(2000); 
    return promise.promise(); 
}; 

var kickoff = $.Deferred(); 

firstFadeIn = kickoff.then(function(){ 
    console.log("kickoff"); 
    return fadeIn1(); 
}); 

secondFadeIn = firstFadeIn.then(function(){ 
    console.log("second fadein"); 
    return fadeIn2(); 
}); 

thirdFadeIn = secondFadeIn.then(function(){ 
    console.log("third fadein"); 
    return fadeIn3(); 
}); 

kickoff.resolve(); 
</script> 

Я хочу, чтобы интегрировать код выше работу в цикле «for» и быть гибким, чтобы иметь возможность обрабатывать любое количество элементов массива.

Answer 1

Возможно, что-то подобное, если я понимаю, что вы после.

var testdata = [1,2,3,4]; 
 
var promise; 
 

 
function fadeIn(fadeNumber) { 
 
    return $("<h1>test "+ fadeNumber +"</h1>").hide().appendTo("#container").fadeIn(2000).promise(); 
 
} 
 

 
testdata.reduce(function(promise, fadeNumber){ 
 
    return promise ? promise.then(fadeIn.bind(null, fadeNumber)) : fadeIn(fadeNumber); 
 
}, null);

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