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>
