uniapp - 倒计时组件-优化循环时间倒计时

使用定时器的规避方法
为了避免定时器误差导致倒计时计算错误，可以采用一些规避方法，比如将倒计时被中断时的剩余时间记录下来，重新开启定时器时再将这个剩余时间加到新的计算中。同时，为了避免定时器延迟，可以在每次执行回调函数时，记录当前时间戳，再计算与上一次执行回调函数的时间差，来调整倒计时的时间。

1.子组件

<template>
	<view class="time">
	<view class="red-box" >{{days>=10?days:'0'+days}}</view>
		<view class="fz-12 color3" style="margin: 0 2px;">天</view>
		<view class="red-box" >{{hours>=10?hours:'0'+hours}}</view>
		<view class="fz-12 color3" style="margin: 0 2px;">时</view>
		<view class="red-box">{{minutes>=10?minutes:'0'+minutes}}</view>
		<view class="fz-12 color3" style="margin: 0 2px;">分</view>
		<view class="red-box">{{seconds>=10?seconds:'0'+seconds}}</view>
		<view class="fz-12 color3" style="margin: 0 2px;">秒</view>
	</view>
</template>

<script>
	export default {
		props: {
			targetDate: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				countdownInterval: null,
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0
			};
		},
		mounted() {
			this.startCountdown();
		},
		beforeDestroy() {
			clearInterval(this.countdownInterval);
		},
		methods: {
			startCountdown() {
				this.updateCountdown(); // 先立即更新一次
				this.countdownInterval = setInterval(() => {
					this.updateCountdown();
				}, 1000);
			},
			updateCountdown() {
				const now = new Date();
				const target = new Date(this.targetDate);
				const duration = Math.max(0, target - now) / 1000;
				this.days = Math.floor(duration / 86400);
				this.hours = Math.floor((duration % 86400) / 3600);
				this.minutes = Math.floor((duration % 3600) / 60);
				this.seconds = Math.floor(duration % 60);
				if (duration <= 0) {
					clearInterval(this.countdownInterval);
					this.$emit('countdownFinished'); // 触发倒计时结束事件
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.time {
		margin-top: 4rpx;
		display: flex;
		color: #ff0000;
		font-size: 22rpx;
		text-align: center;
		align-items: center;

		.red-box {
			font-size: 22rpx;
		}
	}
	.color3{
		color: #ff0000;
		font-size: 22rpx;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79