jQuery/Javascript make callback for countdown

user_2571904 0
Viewed 16

I have jquery countdown function with below code:

$.fn.countdown = function(toTime, callback){
                    let $el = $(this);
                    var intervalId;
                    
                    let timeUpdate = () => {
                        var now = new Date().getTime();
                        var distance = toTime - now;

                        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                    
                        if(distance < 0){
                            clearInterval(intervalId);
                        }
                        else{
                            var value = days + "<sup>d</sup> " + (hours > 9 ? hours : '0' + hours) + ":" +  (minutes > 9 ? minutes : '0' + minutes) + ":" +  (seconds > 9 ? seconds : '0' + seconds);
                            $el.html(value);
                        }
                        
                        if(callback) callback();
                    }
                  
                    timeUpdate();
                    intervalId = setInterval(timeUpdate, 1000);
                };
        
$('#my_div').countdown(new Date("Jun 23, 2022 22:37:25").getTime());

$('#my_div2').countdown(new Date("Jun 23, 2022 22:20:25").getTime());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="my_div"></div>

<div id="my_div2"></div>

Now I need to add callback function if the time has finished. My idea is like this:

$('#my_div').countdown(new Date("Jun 23, 2022 22:37:25").getTime(), function(){
    callback: function() {
        alert("Counting Finish");
    }
});

Is there any way to implement that callback?

callback jquery javascript
1 Answers

Your code is almost there, there's just two issues. Firstly you need to invoke the callback argument from within the distance < 0 block, as that's what determines when the countdown has ended. Secondly you need to provide an actual callback argument to the countdown() call.

Note in the following example I made the countdowns only a few seconds from the current date to make the demo clearer.

$.fn.countdown = function(toTime, callback) {
  let $el = $(this);
  var intervalId;

  let timeUpdate = () => {
    var now = new Date().getTime();
    var distance = toTime - now;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    if (distance < 0) {
      clearInterval(intervalId);
      callback && callback();
    } else {
      var value = days + "<sup>d</sup> " + (hours > 9 ? hours : '0' + hours) + ":" + (minutes > 9 ? minutes : '0' + minutes) + ":" + (seconds > 9 ? seconds : '0' + seconds);
      $el.html(value);
    }
  }

  timeUpdate();
  intervalId = setInterval(timeUpdate, 1000);
};

var date1 = new Date();
date1.setSeconds(date1.getSeconds() + 5);
$('#my_div').countdown(date1.getTime(), () => console.log('first countdown elapsed!'));

var date2 = new Date();
date2.setSeconds(date2.getSeconds() + 10);
$('#my_div2').countdown(date2.getTime(), () => console.log('second countdown elapsed!'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="my_div"></div>

<div id="my_div2"></div>

user_5194130
Related