Countdown in JavaScript

So when the user inputs the incorrect answer, the professor I'm building this for wants Storyline to pause for 30 min so they can review the reading (for sanity's sake, I have this at 10sec while testing). Since 30 minutes is a long time to go with the page paused, I made a layer that tells the user they should be reading, and I would like it to have a countdown so they know how long they have until they can continue. For that I have a bit of JavaScript written, however this isn't executing the way I want it to. For some reason it waits 10 seconds and THEN shows the layer, as opposed to showing the layer and seeing the variable adjust on that layer. I've tried having the "Execute JavaScript" trigger after the show layer  trigger, and also at the start of the timeline on the layer I want it to execute on. Both do the weird wait-10-second thing. 

Below is the code. I haven't been writing in JavaScript long, so it can easily be an error in the code. Please note that in Storyline, I have my seconds and minutes variables set to start at 100 so I could be sure that when I saw 0 minutes 0 sec, that means the seconds and minute variables DID in fact change.

Thanks so much!

Katie

var time = 10;

var player = GetPlayer();

var ONE_SEC = 1000;

player.SetVar("screen", "about to execute main");

main();

player.SetVar("screen", "done with main");

function pausecomp(ms) {

    ms += new Date().getTime();

    while (new Date() < ms) {}

} 

function timer(num) {

    var minutes = ~~(num / 60);

    var seconds = (num - (minutes * 60));

    player.SetVar("min", minutes);

    player.SetVar("sec", seconds);

}

function main() {

    player.SetVar("screen", "in main");

    for (var i=0; i <= time; i++) {

        player.SetVar("screen", "in for");

        pausecomp(ONE_SEC);

        timer(time-i);

    }

    player.SetVar("timesup", true);

}