Question

I would like to animate an html page with something like this:

function showElements(a) {   
  for (i=1; i<=a; i++)  {  
    var img = document.getElementById(getImageId(i));  
    img.style.visibility = 'visible';  
    pause(500);  
  }  
}

function pause(ms) {
  ms += new Date().getTime();
  while (new Date() < ms){}
}

Unfortunately, the page only renders once javascript completes.

If I add

 window.location.reload();

after each pause(500); invocation, this seems to force my javascript to exit. (At least, I do not reach the next line of code in my javascript.)

If I insert

 var answer=prompt("hello");

after each pause(500), this does exactly what I want (i.e. update of the page) except for the fact that I don’t want an annoying prompt because I don’t actually need any user input.

So… is there something I can invoke after my pause that forces a refresh of the page, does not request any input from the user, and allows my script to continue?

Answer 1

While the javascript thread is running, the rendering thread will not update the page. You need to use setTimeout.

Rather than creating a second function, or exposing i to external code, you can implement this using an inner function with a closure on a and i:

function showElements(a) {
    var i = 1;
    function showNext() {
        var img = document.getElementById(getImageId(i));  
        img.style.visibility = 'visible'; 
        i++;
        if(i <= a) setTimeout(showNext, 500);
    }
    showNext();
}

---

If I add window.location.reload(); after each pause(500) invocation, this seems to force my javascript to exit

window.reload() makes the browser discard the current page and reload it from the server, hence your javascript stopping.

---

If I insert var answer=prompt("hello"); after each pause(500), this does exactly what I want.

prompt, alert, and confirm are pretty much the only things that can actually pause the javascript thread. In some browsers, even these still block the UI thread.