Question

I try to change a label’s text periodically by using the following code:

    function sleep(milliSeconds) {
        var startTime = new Date().getTime();
        while (new Date().getTime() < startTime + milliSeconds); 
    }
    function showMap() {
        var str = document.getElementById("lbPoints").firstChild.nodeValue;
        var lbl = document.getElementById("my");
        var strs = str.split("-");
        var millisecondsToWait = 500;

        for (var i = 0; i < strs.length-1; i++) {
            lbl.innerHTML = strs[i];
            sleep(500);
        }     
    }

My “str” and “strs” are right. Code works, but as waits for 5 seconds and print the final string in strs to screen and nothing else. What can I do to change it periodically?

Answer 1

That’s not how you sleep. In no language is it correct to test repeatedly
until a date.

Do this instead :

function showMap() {
    var str = document.getElementById("lbPoints").firstChild.nodeValue;
    var lbl = document.getElementById("my");
    var strs = str.split("-");
    var millisecondsToWait = 500;
    var i=0;
    var interval = setInterval(function(){
        if (i==strs.length-2) clearInterval(interval); 
        lbl.innerHTML = strs[i++];
    }, millisecondsToWait);   
}

Demonstration

This uses setInterval to call repeatedly a function, and clearInterval at the end of array to stop the function being called.