jQuery/Javascript make callback for countdown-CodePudding

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?

CodePudding user response：

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>