jQuery/Javascript为倒计时做回调

Question

我有一个jquery倒计时功能，代码如下:

$.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>

现在我需要添加回调函数，如果时间已经结束。我的想法是这样的:

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

有没有办法实现那个回调?

Answer 1

代码差不多完成了，只是有两个问题。首先，您需要从distance < 0块中调用callback参数，因为它决定了倒计时何时结束。其次，您需要为countdown()调用提供实际的回调参数。

请注意，在下面的例子中，为了使演示更清晰，我将倒计时从当前日期只设置了几秒钟。

$.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>