Utilisation de Jquery différées et de la boucle 'for' pour rendre les données dynamiques en utilisant les effets Jquery dans l'ordre séquentiel

Question

Je souhaite utiliser une boucle 'for' (méthode non reduce ou forEach ou toute autre méthode) pour parcourir un tableau de données dynamiques (le nombre de valeurs peut varier) et utiliser Jquery différées pour afficher chaque valeur en utilisant les effets Jquery dans l'ordre séquentiel (l'effet doit se terminer avant l'affichage du prochain élément du tableau)

Voici un bloc de code qui fonctionne avec un code statique sans boucle « pour » - comme vous pouvez voir 1 valeur est fanée à une heure:

<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> 

Je veux intégrer le code ci-dessus au travail dans une boucle 'for' et être flexible pour pouvoir traiter n'importe quel nombre d'éléments de tableau.

Answer 1

Peut-être quelque chose comme ça, si je comprends ce que vous cherchez.

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>