Using Jquery deferreds and 'for' loop to render dynamic data using Jquery effects in sequential order

Question

I want to use a 'for' loop (not reduce method or forEach or any other method) to iterate through an array of dynamic data (number of values can vary) and use Jquery deferreds in order to display each value using Jquery effects in sequential order (effect must finish before next array item is displayed)

Here is a block of code that works when using static code without 'for' loop -- as you can see 1 value is faded in at a time:

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

I want to integrate the code above to work within a 'for' loop and be flexible to be able to process any number of array items.

Since you have an array, consider Array.prototype.forEach instead. — Taplar, Dec 20 '16 at 04:27
Isn't this an exact duplicate of your [previous question](http://stackoverflow.com/q/41174068/1048572)? Just use `.reduce` on an array — Bergi, Dec 20 '16 at 04:44
I want to understand how to accomplish this using a 'for' loop -- for some reason I can't get it to work and really want to figure out how to do this with 'for' loop instead of 'reduce' method — Trevor, Dec 20 '16 at 15:16
@Trevor can I ask why you want to use for and rewrite all the boilerplating involved with it, rather than using forEach or reduce that already have the iteration baked in? — Taplar, Dec 20 '16 at 17:34
@Trevor _"I want to understand how to accomplish this using a 'for' loop -- for some reason I can't get it to work and really want to figure out how to do this with 'for' loop instead of 'reduce' method"_ No `for` loop appears at `javascript` at Question. Can you include `for` loop patterns that you have have tried at Question? — guest271314, Dec 21 '16 at 01:57

Taplar · Answer 1 · 2016-12-20T15:17:35.713

0

Maybe something like this, if I understand what you are after.

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>

edited Dec 20 '16 at 15:17

answered Dec 20 '16 at 04:37

Taplar

24,788
4
22
35

You really should be using `reduce` instead of `forEach` here – Bergi Dec 20 '16 at 04:44
Updated to use reduce instead. – Taplar Dec 20 '16 at 15:17
Thanks for your response but do not want to use 'reduce' method or 'forEach' -- I want to use a 'for' loop to iterate through the array and achieve the desired result of effects being displayed in sequence -- for (i=0; i < testdata.length;i++){} – Trevor Dec 20 '16 at 15:54

Using Jquery deferreds and 'for' loop to render dynamic data using Jquery effects in sequential order

1 Answers1