JS 定时器
setInterval
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
/*
1.uniapp中使用定时器,实现倒计时功能
2.需要在页面销毁的时候,清除定时器
3.每次生成定时器前,必须判断,该定时器是否存在,如果存在,就return(不可重复生成)
*/
<template>
<view>剩余时间:{{str}}</view>
</template>
<script>
import moment from "dayjs";
export default {
props: {
date: {
type: String,
default () {
return "";
},
},
},
data() {
return {
timer: null,
str: ""
}
},
created() {
let {
date,
} = this;
let str = ''
if (!this.timer) {
this.timer = setInterval(() => {
let day = moment(date).diff(moment(), 'days');
let hour = moment(date).diff(moment(), 'hours') % 24;
let minute = moment(date).diff(moment(), 'minutes') % 60;
let second = moment(date).diff(moment(), 'seconds') % 60;
day = day < 10 ? `0${day}` : day;
hour = hour < 10 ? `0${hour}` : hour;
minute = minute < 10 ? `0${minute}` : minute;
second = second < 10 ? `0${second}` : second;
if (day > 0) {
str = `${day}天${hour}时${minute}分${second}秒`;
} else if (hour > 0) {
str = `${hour}时${minute}分${second}秒`;
} else if (minute > 0) {
str = `${minute}分${second}秒`;
} else if (second > 0) {
str = `${second}秒`;
} else {
str = '--'
}
this.str = str;
}, 1000)
}
},
destroyed() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null;
}
}
};
</script>
<style scoped></style>