Reset first countdown after the second countdown

Question

Im working on a simple countdown that displays a modal when it is zero, then on that modal there is another countdown, it will close when on zero.

what I want is reset the first countdown again and do the same process.

How can I achieve that?

hope you understand me.

Thanks.

SAMPLE CODE

//declare start time
        var timer2 = "00 : 00 : 10";
        // timer2 = timer2.replace(/秒|_/g,'')


        //intercal for seconds
        var interval = setInterval(function() {
          //timer will be [hour, minute, second]
          var timer = timer2.split(':');
          var hour = parseInt(timer[0], 10);
          var minutes = parseInt(timer[1], 10);
          var seconds = parseInt(timer[2], 10);
          //reduce second by one
          --seconds;
          //calculate new minute and hours
          minutes = (seconds < 0) ? --minutes : minutes;

          if (minutes < 0) {


            minutes = 00;
            seconds = 00;
            clearInterval(interval);

            $('#informationModal').fadeIn();

        var timeleft = 4;
        var downloadTimer = setInterval(function(){
        timeleft--;
        $('.sec').text(timeleft);

        if(timeleft == 0){
            clearInterval(downloadTimer);
            $('#informationModal').fadeOut();
            minutes = 00;
            seconds = 10;
        }
    },1000);


          }

          seconds = (seconds < 0) ? 59 : seconds;
          seconds = (seconds < 10) ? '0' + seconds : seconds;
          minutes = (minutes < 0) ? 59 : minutes;
          minutes = (minutes < 10) ? '0' + minutes : minutes;
          hour = (hour < 0) ? 59 : hour;
          hour = (hour < 10) ? '0' + hour : hour;


          timer2 = hour + ':' + minutes + ':' + seconds;
          $('#countdown').html(timer2);

        }, 1000);

Answer 1

This is to give you an idea how you could solve it with scoping your code in a function and then call that function over and over again.

var timer2 = "00 : 00 : 5";
var hour = 0;
var minutes = 0;
var seconds = 0;

var setupTime = function(time){
  let timer = time.split(':');
  hour = parseInt(timer[0], 10);
  minutes = parseInt(timer[1], 10);
  seconds = parseInt(timer[2], 10);
}

setupTime(timer2);


var myFunction = function(){
  var interval = setInterval(function() {
    --seconds;
    minutes = (seconds < 0) ? --minutes : minutes;
    if (minutes < 0 && seconds < 0) {
      clearInterval(interval);
      $('#informationModal').fadeIn();
      var timeleft = 4;
      var downloadTimer = setInterval(function(){
        timeleft--;
        $('.sec').text(timeleft);

        if(timeleft == 0){
         clearInterval(downloadTimer);
          $('#informationModal').fadeOut();
          // resetTimer and call myFunction to start again
          setupTime(timer2);
          myFunction();
        }
      },1000);
    } else {
        $('#countdown').html(seconds);
    }
  }, 1000);
};

myFunction();

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="countdown"></div>


<!-- The Modal -->
<div id="informationModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    
    <p>Some text in the Modal..<span class="sec"></span></p>
  </div>

</div>

You need to be careful with variables if you change them from integers to strings. That's why the time is not visible as 00:00:00 but you will figure out how to solve that.

Side note: If you ask a question. Please always check your indents and fix them as long as you need to provide "clean" code. As it is no fun to fix indents to answer a question.

Answer 2

Easiest way would be to wrap everything into a function, and call that function again when fadeOut of modal completes.

$('#informationModal').fadeOut(400, startTimer);

function startTimer() {
    //declare start time
    var timer2 = "00 : 00 : 10";
    // timer2 = timer2.replace(/秒|_/g,'')
    //intercal for seconds
    var interval = setInterval(function() {
        //timer will be [hour, minute, second]
        var timer = timer2.split(':');
        var hour = parseInt(timer[0], 10);
        var minutes = parseInt(timer[1], 10);
        var seconds = parseInt(timer[2], 10);
        //reduce second by one
        --seconds;
        //calculate new minute and hours
        minutes = (seconds < 0) ? --minutes : minutes;

        if (minutes < 0) {


            minutes = 00;
            seconds = 00;
            clearInterval(interval);

            $('#informationModal').fadeIn();

            var timeleft = 4;
            var downloadTimer = setInterval(function() {
                timeleft--;
                $('.sec').text(timeleft);

                if (timeleft == 0) {
                    clearInterval(downloadTimer);
                    $('#informationModal').fadeOut(400, startTimer);
                    minutes = 00;
                    seconds = 10;
                }
            }, 1000);


        }

        seconds = (seconds < 0) ? 59 : seconds;
        seconds = (seconds < 10) ? '0' + seconds : seconds;
        minutes = (minutes < 0) ? 59 : minutes;
        minutes = (minutes < 10) ? '0' + minutes : minutes;
        hour = (hour < 0) ? 59 : hour;
        hour = (hour < 10) ? '0' + hour : hour;


        timer2 = hour + ':' + minutes + ':' + seconds;
        $('#countdown').html(timer2);

    }, 1000);
}

startTimer();

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="countdown"></div>


<!-- The Modal -->
<div id="informationModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    
    <p>Some text in the Modal..<span class="sec"></span></p>
  </div>

</div>