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!

Answer 1

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