Vue中使用定时器
注意事项：
# 关键点1：
使用的时候要用window.setInterval(this.timer, 1000);不要用vue原生的，否则出现问题
# 关键点2：
如果非要用vue的setInterval，赋值的时候要全局变量赋值。
window.xxx = setInterval(this.timer, 1000)
清除的定时器的时候
clearInterval(window.xxx);
# 关键点3：
setInterval第一次执行会等待时间间隔后执行，所以要想在timmer里面做所有的数据的话，需要手动执行以下timmer().
代码
// 保证了当为00s显示0s状态时长为1s。
// 但是0s的期间优惠价格消失，替换成原价。
// 也就是说看到0s优惠价格已经无效了。
<template>
<div v-if="!(end_time_info.surplus_total_secondse<-1)">
<div class="sale-time">
<p class="sale-type">{{course_info.discount_type}}</p>
<p class="expire">距离结束：仅剩 {{end_time_info.day}}天 {{end_time_info.hour}}小时 {{end_time_info.minute}}分 <span
class="second">{{end_time_info.second}}</span> 秒</p>
</div>
<div ></div>
<div v-if="!(end_time_info.surplus_total_secondse<0)">
<p class="course-price">
<span>活动价</span>
<span class="discount">¥{{course_info.real_price}}</span>
<span class="original">¥{{course_info.price}}</span>
</p>
</div>
</div>
<div v-else class="sale-time">
<p class="sale-type">价格 <span class="original_price">¥{{course_info.price}}</span></p>
<p class="expire"></p>
</div>
</template>
<script>
data() {
return {
end_time_info:{
day:' ',
hour:' ',
minute:' ',
second:' ',
surplus_total_secondse:-2,
surplus_total_secondse_start:'',
timmer_setinterval:1 // 相当于一个第一次执行的开关，或者他可以变为间隔值，有兴趣可以再度封装。
},
tabIndex: 2, // 当前选项卡显示的下标
course_id: 0, // 当前课程信息的ID
course_info: {
teacher: {},
}, // 课程信息
course_chapters: [], // 课程的章节课时列表
playerOptions: this.$settings.playerOptions
}
// 某个ajax请求后台
this.$axios.get(`${this.$settings.base_url}/course/${this.course_id}/`).then(response => {
// window.console.log(response.data);
this.course_info = response.data;
// 剩余总共秒数
if (this.course_info.active_time){
this.end_time_info.surplus_total_secondse = this.get_seconds(this.course_info.active_time);
// this.end_time_info.surplus_total_secondse = this.get_seconds("2019-12-18 12:58:30");
this.timer();
// 统计剩余时间
this.end_time_info.timmer_setinterval = window.setInterval(this.timer, 1000);
}
})
// 方法们
methods(){
get_seconds(active_time){
let timeDate = active_time;
let end_time = new Date(timeDate);
let end_time_seconds = Math.floor(end_time.getTime()/1000);
let now = new Date();
let now_seconds = Math.floor(now.getTime()/1000);
let surplus_seconds = end_time_seconds - now_seconds;
return surplus_seconds
},
timer() {
// 为了让用户看到0的时候显示1s，其实在surplus_total_secondse=-1期间用户已经看不到优惠价格了
if (this.end_time_info.surplus_total_secondse < -1){
console.log('我被执行了');
clearInterval(this.end_time_info.timmer_setinterval);
// this.end_time_info.timmer_setinterval = ""
return
}
//开局第一次就显示剩余秒数.因为setinterval 会等一个间隔s才执行
if (this.end_time_info.surplus_total_secondse_start){
this.end_time_info.surplus_total_secondse = this.end_time_info.timmer_setinterval+ this.end_time_info.surplus_total_secondse
}
// 第二次就进不来了，当执行到最后的时候会自己-1也就回到了正常s数。
this.end_time_info.surplus_total_secondse_start = '';
// 为什么可以等于0就是为了显示效果为了让用户看到0，实则优惠价格就在此刻已经消失。
if(this.end_time_info.surplus_total_secondse>=0){
let surplus_secondse = this.end_time_info.surplus_total_secondse;
//包含的天数
let day = Math.floor(surplus_secondse / (3600 * 24));
// console.log(d,'天数')
let s = surplus_secondse - day * 3600 * 24;
//计算包含的小时数
let hour = Math.floor(s / 3600);
s -= hour * 3600; //剩下的秒数
//计算包含的分钟数
let minute = Math.floor(s / 60);
//计算剩下的秒
let second = s - minute * 60;
this.end_time_info.day = day < 10 ? '0' + day : day;
this.end_time_info.hour = hour < 10 ? '0' + hour : hour;
this.end_time_info.minute = minute < 10 ? '0' + minute : minute;
this.end_time_info.second = second < 10 ? '0' + second : second; // 0s的时候代表所有的秒数走完了 显示的非常快0是看不到的
console.log(this.end_time_info.second);
// this.end_time_info.surplus_total_secondse -= 1;
}
this.end_time_info.surplus_total_secondse -= 1;
console.log(this.end_time_info.surplus_total_secondse);
},
}
</script>