element appendchild by timer

Question

I am trying to append new element p into the div by every second, now I have something like this

<div id="div"> </div> 
<button id="button" onclick="newfun()"> 1</button>
<script type="text/javascript">
    function newfun() {
        var d = new Date();
        var t = d.getTime();
        while(1) {
            d = new Date();
            var c = d.getTime();
            if (c-t>1000) {
                    var para = document.createElement("p");
                    var node = document.createTextNode("new para");
                    para.appendChild(node);
                    var element = document.getElementById("div");
                    element.appendChild(para);
                    //return;
            }
        }
    }
</script>

It just hangs there every time I click on the button. How should I change it to make it work?

Use `setInterval` instead – Ivan Sivak Sep 05 '17 at 12:00 — Ivan Sivak, Sep 05 '17 at 12:00
`while(1)` is not a timer, it's an infinite loop. – vgru Sep 05 '17 at 12:00 — vgru, Sep 05 '17 at 12:00

score -1 · Accepted Answer · answered Sep 05 '17 at 12:08

You shouldn't use while for this because you are running an infinite loop. To run a timer for every one seconds, use setInterval

var interval;
function newfun() {

  clearInterval(interval); //clear any existing setInterval. clicking on button should not run multiple setIntervals and better clear it

  var element = document.getElementById("div"); //for better performance moved it outside.

  interval = setInterval(function(){
    var para = document.createElement("p");
    var node = document.createTextNode("new para");
    para.appendChild(node);
    element.appendChild(para);
  }, 1000);  // runs for every one seconds
}

element appendchild by timer

1 Answers1