Jquery countdown: How to make callbacks at different moment of the countdown?

0

Issue

I’ve a simple requirement.

  • When a page displays, a countdown starting from 30 minutes is displayed at the bottom-right of the page.
  • The countdown is hidden after 15 seconds.
  • 1 minutes before the expiration, the countdown is displayed again till the end.
  • At the expiration, a javascript alert is displayed to tell the user the time is up.

    $("#divCountdown")
       .countdown(timeToExpire, function (event) {
          $(this).text(
            event.strftime('%M:%S')
          );
          //15 seconds later do something
          //1740 seconds later, i.e. 29 minutes, do something
          //1800 seconds later, i.e. 30 minutes, do something
    })
    

The above code allows me to display the countdown. Is there a way to make callbacks while the countdown is going on? The first one after 15 seconds so that I can hide the div that displays the countdown, 1 minute before the expiration, display it again, and at the end, display the JavaScript popup?

Thansk for helping

Solution

I will assume that you already know how to hide, show or change the inner text of an HTML tag and that it is already in the correct place of your HTML. Let us focus on how the countdown should work:

$(function() {
    //Initialization
    var minutes = 30;
    var seconds = 0;
    //Make sure your div exists
    var countDownContext = $("#divCountdown");
    //Showing things initially
    countDownContext.text(minutes + ":" + seconds);
    //15 seconds
    var initialTime = 15;
    //We store the interval to be able to stop the repetition later
    var myInterval = setInterval(function() {
        //Are we still inside those 15 seconds at the start?
        if (initialTime > 0) {
            //Was this the last second?
            if (--initialTime === 0) {
                //Then hide
                countDownContext.hide();
            }
        }
        //We decrease seconds and check whether it, before decreasing was 0
        if (seconds-- === 0) {
            //If it was, then we decrease a minute and set seconds to 59
            minutes--;
            seconds = 59;
        }
        //Refresh inner text
        countDownContext.text(minutes + ":" + seconds);
        //Is the last minute reached?
        if ((minutes === 1) && (seconds === 0)) {
            //Then show
            countDownContext.show();
        }
        //Is the time expired?
        if ((minutes <= 0) && (seconds <= 0)) {
            //Then alert about it
            alert("Your time is up");
            //And clear the interval
            clearInterval(myInterval);
        }
    }, 1000);
});

EDIT:

The same logic as described here can be used with the plugin you intend to use, take a look at this example.

Answered By – Lajos Arpad

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More