Question

    function animateGraph() {
    var graph;
    for(i=0; i<10; i++)
    {
        var start = new Date();
        while((new Date()) - start <= 500) {/*wait*/}
        document.getElementById("timeMark").innerHTML = phoneX[i].epoch;

    }
}

The loop works. The wait works. But the document.getElement is not showing up until the last item in the array…why?

Answer 1

Using setTimeout will allow the code to run and not lock up the page. This will allow it to run the code and will not effect other elements on the page.

var cnt = 0;
(function animateGraph() {
    document.getElementById("timeMark").innerHTML = phoneX[cnt].epoch;
    cnt++;
    if (cnt<10){
        window.setTimeout(animateGraph,500);
    }
})();