I have a jquery timer on my page that counts down from 10 to 0. At 5 seconds I want to show a warning message then at 0 seconds I want to show another message.

I have used the code below which will do the count down in the form field as well as give the alerts, however the countdown stops when the alerts show:

$(function(){
    var count = 10;
    countdown = setInterval(function(){
        $("#Exam_Timer").val(count + " seconds remaining!");
        if (count == 5) {
            alert('Only 5 Seconds Left');
        }   
        if (count == 0) {
            alert('Times Up')
        }
    count--;
    }, 1000);
});

Can someone let me know how I would restructure this so that the alerts do no stop the countdown?

I tried putting the alert into a separate function but that did not help. I have created a Fiddle:

/

I have a jquery timer on my page that counts down from 10 to 0. At 5 seconds I want to show a warning message then at 0 seconds I want to show another message.

I have used the code below which will do the count down in the form field as well as give the alerts, however the countdown stops when the alerts show:

$(function(){
    var count = 10;
    countdown = setInterval(function(){
        $("#Exam_Timer").val(count + " seconds remaining!");
        if (count == 5) {
            alert('Only 5 Seconds Left');
        }   
        if (count == 0) {
            alert('Times Up')
        }
    count--;
    }, 1000);
});

Can someone let me know how I would restructure this so that the alerts do no stop the countdown?

I tried putting the alert into a separate function but that did not help. I have created a Fiddle:

http://jsfiddle/CQu7T/

• javascript
• jquery

• JavaScript alerts are modal. They block browser controls and scripts running. Use own implemented message blocks. – VisioN Commented May 19, 2012 at 14:05
• @jdublu You're missing a clearInterval when count === 0 ;) – Andreas Commented May 19, 2012 at 14:10

2 Answers 2

You cant do this with alert as it stop scripts execution. However you can achieve this with jQuery UI dialogs. Check the following demo

Working Demo

Alerts are weird things which in essence break default browser settings (controls and scripts) when they are shown.

What you can do is placing the alert message in another element with jquery html

$(function(){
    var count = 10;
    countdown = setInterval(function(){
        $("#Exam_Timer").val(count + " seconds remaining!");
        if (count == 5) {
            $("#message").html('Only 5 Seconds Left');
        }

        if (count == 0) {
           $("#message").html('Times Up')
        }
        count--;
    }, 1000);
});

See this jsfiddle. You can make style this element with some css to make it look like a modal window.