Javascript for loop problems

Question

So I have the following code which i basically just a JSON string I am using eval to convert to an object. Now, this object has an array of elements that gets displayed to the screen via a for loop:

function DisplayListing(str)
{
    var obj = eval("(" + str + ")");
    var div = document.getElementById('Response');
    for(i=0; i<obj.files.length; i++)
    {
        div.innerHTML += '<span id="listing' + i + '" class="displayNone"><img src="' + obj.files[i].icon + '"/>' + obj.files[i].name + '</span><br />';   
    }   
}

This works just fine. However, what I want it to do is wait a set interval of time before it continues to the next element. I want to it basically call a function with a timeout, so each element fades onto the screen individually. All attempts so far on cause the last element to execute a function. Any help would be greatly appreciated!

Eval is not always a bad idea, if the source is trusted and precautions are taken eval can be a nice and quick tool. But rarely can you trust a source so I would recommend using a json parser from json.org — austinbv
– austinbv, Commented Aug 30, 2011 at 12:41

pimvdb · Accepted Answer · 2011-08-30 12:41:38Z

3

http://jsfiddle.net/SfKNc/

var obj = {files: [1, 2, 3]}; // sample object - use JSON.parse by the way
var div = document.getElementById('Response');
for(var i=0; i<obj.files.length; i++) { // use var!
    setTimeout((function(i) {
        return function() { // i changes, so create a new function in which i does not change
            div.innerHTML += 
                '<span id="listing' + i + 
                '" class="displayNone">' + i + 
                '</span><br />';
        };
    })(i), i * 1000); // set timeout to 1000 ms for first item, 2000 for second etc.
}

answered Aug 30, 2011 at 12:41

pimvdb

155k80 gold badges312 silver badges357 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

grep Over a year ago

This looks promising, however I am getting a syntax error: unexpected token around return function() {

Jiri Kriz Over a year ago

@pimvdb: does this need to install N timers (N = obj.files.length) ?

pimvdb Over a year ago

@jiri: It currently does, yes.

Paul · Accepted Answer · 2012-01-18 22:42:05Z

0

you have manually create a sleep function something like the below:

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

or you create an empty function and use the setTimeout on it

  function sleep()
    {
    setTimeout(Func1, 3000);
    }

    Func1(){}

http://www.phpied.com/sleep-in-javascript/

edited Jan 18, 2012 at 22:42

Paul

142k28 gold badges285 silver badges272 bronze badges

answered Aug 30, 2011 at 12:40

Massimiliano Peluso

26.8k6 gold badges65 silver badges75 bronze badges

2 Comments

pimvdb Over a year ago

Note that the infinite for loop causes the browser to hang, and might not work if looping 1e7 times finishes earlier (which is certainly possible as of today).

Massimiliano Peluso Over a year ago

it was just to show an idea the source is the web site showed at the bottom.I personally prefer the second sleep function

Collectives™ on Stack Overflow

Javascript for loop problems

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related