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?
>Solution :
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>