Javascript loop to DOM

Question

I'm executing the following code every 5 seconds, but the content appears as a block all at once, ideally it should be writing to the DOM each time it loops? So each value in the array should have its own div?

function newfunction() {
    var obj;
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            obj = JSON.parse(xmlhttp.responseText);

            for (var i = 0, n = obj.length; i < n; i++) {
                var divTag = document.createElement("div");
                divTag.id = "div" + i;
                divTag.innerHTML = obj[i];
                divTag.className+="nodeclass";
                document.getElementById("content").appendChild(divTag);
            }
        }
    }
    xmlhttp.open("GET","verify.php",true);
    xmlhttp.send();
}
window.onload=function() {
    newfunction();
    setInterval("newfunction()",5000);
}

So on page load it gets some content, then it should be adding more every 5 secs.

Thanks.

How are you running it every 5 seconds? The bug is probably in your timer (setTimeout?) code. — John Kugelman
– John Kugelman, Commented Aug 22, 2012 at 17:47
Are you sure you want to have each loop iteration visibly modify the DOM? Doing it in bulk is significantly less taxing on the client. If you really need it separate then you can use a timeout loop construct. — TheZ
– TheZ, Commented Aug 22, 2012 at 17:47
setInterval("newfunction()",1000); the loop is part of a function which is an Ajax call, surely that loop should be updating the DOM with each line though? — bobster
– bobster, Commented Aug 22, 2012 at 17:48
@bobster Can you post a small, self-contained example program that demonstrates the problem? I would like to see the rest of your code since the problem is not in this for loop. You can edit your question and put it there. — John Kugelman
– John Kugelman, Commented Aug 22, 2012 at 17:51
@bobster when you update the DOM via JavaScript, modern browsers generally will not show you every individual update separately. Instead, they'll repaint only when necessary, or when your code is completely finished. — Pointy
– Pointy, Commented Aug 22, 2012 at 17:53

Ian · Accepted Answer · 2012-08-22 17:56:40Z

1

I'm not seeing any setTimeout or setInterval, but I would do something like this:

function processIt(obj, i) {
    var n = obj.length;
    if (i < n) {
        var divTag = document.createElement("div");
        divTag.id = "div" + i;
        divTag.innerHTML = obj[i];
        divTag.className+="nodeclass";
        document.getElementById("content").appendChild(divTag);
        setTimeout(function () {
            processIt(obj, ++i);
        }, 1000);
    }
}

var obj = document.getElementsByTagName("div"); // Or whatever "obj" is

processIt(obj, 0);

answered Aug 22, 2012 at 17:56

Ian

51k13 gold badges104 silver badges111 bronze badges

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

6 Comments

bobster Over a year ago

the setinterval isn't in the loop, but loads the loop every 5 secs.

Ian Over a year ago

"but the content appears as a block all at once" - that's because the browser does it so fast that something small like adding elements can't be distinguished in the milliseconds it takes to do so

Ian Over a year ago

You can make the setTimeout interval value smaller, but this would delay the adding of each element to the page, and make it look like there is some time in between adding each. Maybe make it 500. If you used jQuery, you could have them fade in and look more dramatic.

bobster Over a year ago

So in order to get them to the page seperately, I need an interval inside the loop?

TheZ Over a year ago

It has nothing to do with the speed of the human eye. The browser doesn't redraw the screen until all the javascript code is run, a timeout gets around this by queuing up another action for another redraw cycle.

|

Phillip J · Accepted Answer · 2012-08-22 18:15:38Z

0

Updated my answer as you just updated your snippet.. What does your JSON-object from verify.php look like? Is it an object or an array or simple strings?

function retrieveContent() {
    var arrayOfElements,
        xmlhttp;

    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            arrayOfElements = JSON.parse(xmlhttp.responseText);
            insertElements(arrayOfElements);

            setTimeout(retrieveContent, 5 * 1000);
        }
    };

    xmlhttp.open("GET","verify.php",true);
    xmlhttp.send();
}

function insertElements(arrayOfElements) {
  var divTag,
      i,
      n;

  for (i = 0, n = arrayOfElements.length; i < n; i++) {
    divTag = document.createElement("div");
    divTag.id = "div" + i;
    divTag.innerHTML = obj[i];
    divTag.className+="nodeclass";
    document.getElementById("content").appendChild(divTag);
  }
}

window.onload=retrieveContent;

jsbin snippet

edited Aug 22, 2012 at 18:15

answered Aug 22, 2012 at 17:58

Phillip J

112 bronze badges

2 Comments

bobster Over a year ago

your script is loading "foo" and "bar" at the same time. How do you load them seperately?

Phillip J Over a year ago

my updated snippet does pretty much same as yours, with some minor refactoring.. would really help if you could supply some example data you expect from the server via verify.php

Collectives™ on Stack Overflow

Javascript loop to DOM

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related