Adding setInterval function inside of for loopin javascript

Question

I've written a for loop that grabs information in my variable object, and now I am trying to use setInterval function inside my loop that will loop through the data displaying 1 piece of data at a time, while looping through the order:

var i = 0;
var twitterData = {
    tweet1 : [{
        user: {
            profile_image_url : "assets/avatar.png",
            name : "@Hodor"
        },
        text : "Hodor Hodor Hodor Hodor Hodor Hodor Hodor..... Hodor"
    }],
    tweet2 : [{
        user: {
            profile_image_url : "assets/avatar.png",
            name : "@johnsnow"
        },
        text : "Someone once said that I know nothing..."
    }],
    tweet3 : [{
        user: {
            profile_image_url : "assets/avatar.png",
            name : "@drwho"
        },
        text : "Fantastic!"
    }]
};

sqTweetData = getTweetData();

function getTweetData() {
    return twitterData;
}

for (var k in sqTweetData) {

    // Gives me object {tweet1: Array[1], tweet2: Array[1]. tweet3: Array[1]}
    console.log("sqTweetData = ",sqTweetData);

    for (var l = 0; l < sqTweetData[k].length; l++) {
        var foo = sqTweetData[k][l]
        // Loops sqTweetData and returns object {user: object, text: "hodor hodor hodor etc"}
        console.log("foo = ", foo);

        setInterval(function() {
            // returns the last object for tweet3 and does NOT display tweet1, tweet2, tweet3 in that order over 3000ms
            console.log(foo);
            i++;
        }, 3000);
    }

}

The issue I am having is that once inside the setInterval function, it only displays the last data (i.e. tweet3) and loops that piece over and over again. It is not looping through the data and displaying it in order. Thoughts?

pizzarob · Answer 1 · 2015-12-10T07:39:07.760

0

var i = 0;
var twitterData = {
  tweet1: [{
    user: {
      profile_image_url: "assets/avatar.png",
      name: "@Hodor"
    },
    text: "Hodor Hodor Hodor Hodor Hodor Hodor Hodor..... Hodor"
  }],
  tweet2: [{
    user: {
      profile_image_url: "assets/avatar.png",
      name: "@johnsnow"
    },
    text: "Someone once said that I know nothing..."
  }],
  tweet3: [{
    user: {
      profile_image_url: "assets/avatar.png",
      name: "@drwho"
    },
    text: "Fantastic!"
  }]
};

sqTweetData = getTweetData();

function getTweetData() {
  return twitterData;
}

// count variable to increment timeout 
count = 1;
for (var k in sqTweetData) {

  // use self executing anonymous function to create a new scope
  (function(k) {
    for (var l = 0; l < sqTweetData[k].length; l++) {
      var foo = sqTweetData[k][l]

      // using setTimeout and incrementing the delay by count
      setTimeout(function() {
        console.log(foo);
        i++;
      }, 3000 * count);
    }
    count++;
  })(k)
}

EDIT: First there was a setInterval being set instead of a timeout. Also the closure issue. Using a self instantiated function solves this issue. The last thing is that the setTimeout needs to be incremented. I added a count variable that increments the delay so that each log is logged 3000ms apart

edited Dec 10 '15 at 07:39

answered Dec 10 '15 at 02:49

pizzarob

11,711
6
48
69

Would you mind explaining the change please? – u111937 Dec 10 '15 at 02:50
The top answer here: http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – pizzarob Dec 10 '15 at 02:55
Alright, it's giving me tweet1, tweet2, tweet3 at once when it loops.... shouldn't it instead loop and give me tweet1, wait 3 seconds, give me tweet2, wait 3 seconds, give me tweet3? – u111937 Dec 10 '15 at 02:58
Oh yeah duh it should be setTimeout not setInterval, i've updated the code – pizzarob Dec 10 '15 at 07:24
I've updated the code. I dont know how i didnt realize before ... a couple things were wrong which i explained in the edit – pizzarob Dec 10 '15 at 07:32
Thanks for updating the code and explaining it. :-) – u111937 Dec 10 '15 at 12:33

Adding setInterval function inside of for loopin javascript

1 Answers1