SetTimeout函数中的setInterval内的倒计时



我想做的是在数组中逐个显示日期时间的倒计时计时器。但对于第一个循环,它会正确显示。随后的迭代既显示值;倒计时";html中的元素出现故障并在这些值之间切换。

我使用的代码如下:

function padZero(time) {
return time < 10 ? '0' + time : '' + time;
}
var found = ["2022-10-01 10:00", "2022-10-02 11:00", "2022-10-03 02:00", "2022-10-04 12:00"];
var interval1 = 30000 / found.length;
(function myLoop(i) {
setTimeout(function() {
console.log(found[i]);
var eventTime, currentTime, duration, interval, intervalId;
interval = 100;
var eventTime = new moment(found[i], 'YYYY-MM-DD HH:mm:ss.SS');
currentTime = moment().format('YYYY-MM-DD HH:mm:ss.SS');
duration = moment.duration(eventTime.diff(currentTime));
setInterval(function() {
duration = moment.duration(duration - interval, 'milliseconds');
if (duration.asSeconds() <= 0) {
clearInterval(intervalId);
$(".countdown").hide();
} else {
var countout = padZero(duration.days()) + " days " + padZero(duration.hours()) + ":" + padZero(duration.minutes()) + ":" + padZero(duration.seconds()) + "." + padZero(duration.milliseconds() / 10 | 0);
console.log(countout);
$(".countdown").html(countout);
}
}, interval);
if (--i) myLoop(i);
}, interval1);
})(found.length - 1);
<body>
<div class="countdown"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

输出:

2022-10-04 12:00
09 days 02:03:18.70
09 days 02:03:18.20
09 days 02:03:17.70
09 days 02:03:17.20
09 days 02:03:16.70
09 days 02:03:16.20
09 days 02:03:15.70
09 days 02:03:15.20
09 days 02:03:14.70
09 days 02:03:14.20
09 days 02:03:13.70
09 days 02:03:13.20
09 days 02:03:12.70
09 days 02:03:12.20
09 days 02:03:11.70
2022-10-03 02:00
09 days 02:03:11.20
07 days 16:03:11.19
09 days 02:03:10.70
07 days 16:03:10.69
09 days 02:03:10.20
07 days 16:03:10.19
09 days 02:03:09.70
07 days 16:03:09.69
09 days 02:03:09.20
07 days 16:03:09.19
09 days 02:03:08.70
07 days 16:03:08.69
09 days 02:03:08.20
07 days 16:03:08.19
09 days 02:03:07.70
07 days 16:03:07.69
09 days 02:03:07.20
07 days 16:03:07.19
09 days 02:03:06.70
07 days 16:03:06.69
09 days 02:03:06.20
07 days 16:03:06.19
09 days 02:03:05.70
07 days 16:03:05.69
09 days 02:03:05.20
07 days 16:03:05.19
09 days 02:03:04.70
07 days 16:03:04.69
09 days 02:03:04.20
07 days 16:03:04.19
2022-10-02 11:00
09 days 02:03:03.70
07 days 16:03:03.69
07 days 01:03:03.69
09 days 02:03:03.20
07 days 16:03:03.19
07 days 01:03:03.19
09 days 02:03:02.70
07 days 16:03:02.69
07 days 01:03:02.69
09 days 02:03:02.20
07 days 16:03:02.19
07 days 01:03:02.19
09 days 02:03:01.70
07 days 16:03:01.69
07 days 01:03:01.69
09 days 02:03:01.20
07 days 16:03:01.19
07 days 01:03:01.19
09 days 02:03:00.70
07 days 16:03:00.69
07 days 01:03:00.69
09 days 02:03:00.20
07 days 16:03:00.19
07 days 01:03:00.19
09 days 02:02:59.70
07 days 16:02:59.69
07 days 01:02:59.69
09 days 02:02:59.20
07 days 16:02:59.19
07 days 01:02:59.19
09 days 02:02:58.70
07 days 16:02:58.69
07 days 01:02:58.69
09 days 02:02:58.20
07 days 16:02:58.19
07 days 01:02:58.19
09 days 02:02:57.70
07 days 16:02:57.69
07 days 01:02:57.69
09 days 02:02:57.20
07 days 16:02:57.19
07 days 01:02:57.19
09 days 02:02:56.70
07 days 16:02:56.69
07 days 01:02:56.69
09 days 02:02:56.20
07 days 16:02:56.19
07 days 01:02:56.19
09 days 02:02:55.70
07 days 16:02:55.69
07 days 01:02:55.69
09 days 02:02:55.20

我想要的实际输出是:

2022-10-04 12:00
09 days 02:03:18.70
09 days 02:03:18.20
09 days 02:03:17.70
09 days 02:03:17.20
09 days 02:03:16.70
09 days 02:03:16.20
09 days 02:03:15.70
09 days 02:03:15.20
09 days 02:03:14.70
09 days 02:03:14.20
09 days 02:03:13.70
09 days 02:03:13.20
09 days 02:03:12.70
09 days 02:03:12.20
09 days 02:03:11.70
2022-10-03 02:00
07 days 16:03:11.19
07 days 16:03:10.69
07 days 16:03:10.19
07 days 16:03:09.69
07 days 16:03:09.19
07 days 16:03:08.69
07 days 16:03:08.19
07 days 16:03:07.69
07 days 16:03:07.19
07 days 16:03:06.69
07 days 16:03:06.19
07 days 16:03:05.69
07 days 16:03:05.19
07 days 16:03:04.69
07 days 16:03:04.19
2022-10-02 11:00
07 days 01:03:03.69
07 days 01:03:03.19
07 days 01:03:02.69
07 days 01:03:01.69
07 days 01:03:01.19
07 days 01:03:00.69
07 days 01:03:00.19
07 days 01:02:59.69
07 days 01:02:59.19
07 days 01:02:58.69
07 days 01:02:58.19
07 days 01:02:57.69
07 days 01:02:57.19
07 days 01:02:56.69
07 days 01:02:56.19
07 days 01:02:55.69

有人能帮我吗?

duration.asSeconds()始终大于0。所以clearInterval不起作用。

function padZero(time) {
return time < 10 ? '0' + time : '' + time;
}
var found = ["2022-10-01 10:00", "2022-10-02 11:00", "2022-10-03 02:00", "2022-10-04 12:00"];
var interval1 = 30000 / found.length;
(function myLoop(i) {
setTimeout(function() {
console.log(found[i]);
var eventTime, currentTime, duration, interval, intervalId;
interval = 500;
var eventTime = new moment(found[i], 'YYYY-MM-DD HH:mm:ss.SS');
currentTime = moment().format('YYYY-MM-DD HH:mm:ss.SS');
duration = moment.duration(eventTime.diff(currentTime));
var count = 0;

setInterval(function() {
duration = moment.duration(duration - interval, 'milliseconds');
let intervalMs = interval * count++;
if (interval1 - intervalMs <= 0) {
clearInterval(intervalId);
} else {
var countout = padZero(duration.days()) + " days " + padZero(duration.hours()) + ":" + padZero(duration.minutes()) + ":" + padZero(duration.seconds()) + "." + padZero(duration.milliseconds() / 10 | 0);
console.log(countout);
$(".countdown").html(countout);
}
}, interval);
if (--i >= 0) myLoop(i);
}, interval1);
})(found.length - 1);
<body>
<div class="countdown"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

最新更新