手把手帶你分解 Vue 倒計(jì)時(shí)組件

以下內(nèi)容來自公眾號逆鋒起筆，關(guān)注每日干貨及時(shí)送達(dá)

作者：bigo前端
https://juejin.cn/post/7038405108371030047

一、前言

1. 計(jì)時(shí)器為什么要用setTimeout而不用setInterval
2. 為什么不直接將剩余時(shí)間-1。
3. 如何將所需要的時(shí)間返回出去（有可能我只需要分鐘和秒數(shù)，那就只返回分鐘和秒數(shù)，也有可能我全都要）。
4. 不確定接口返回的是剩余時(shí)間還是截止日期，該怎么同時(shí)兼容這兩種情況。
5. 不確定接口返回的時(shí)間是秒還是毫秒單位。

二、開始手操 前端開發(fā)博客

1. 先創(chuàng)建一個(gè)vue組件

'scss'?scoped>

2. 實(shí)現(xiàn)基本的倒計(jì)時(shí)組件

'scss'?scoped>

'scss'?scoped>

'scss'?scoped>

durationFormatter(time)?{
??if?(!time)?return?{?ss:?0?};
??let?t?=?time;
??const?ss?=?t?%?60;
??t?=?(t?-?ss)?/?60;
??if?(t?return?{?ss?};
??const?mm?=?t?%?60;
??t?=?(t?-?mm)?/?60;
??if?(t?return?{?mm,?ss?};
??const?hh?=?t?%?24;
??t?=?(t?-?hh)?/?24;
??if?(t?return?{?hh,?mm,?ss?};
??const?dd?=?t;
??return?{?dd,?hh,?mm,?ss?};
},

3. 為什么要用setTimeout來模擬setInterval的行為？

setTimeout(function(){···?},?n);?//?n毫秒后執(zhí)行function

setInterval(function(){···?},?n);?//?每隔n毫秒執(zhí)行一次function

再次強(qiáng)調(diào)，定時(shí)器指定的時(shí)間間隔，表示的是何時(shí)將定時(shí)器的代碼添加到消息隊(duì)列，而不是何時(shí)執(zhí)行代碼。所以真正何時(shí)執(zhí)行代碼的時(shí)間是不能保證的，取決于何時(shí)被主線程的事件循環(huán)取到，并執(zhí)行。

setInterval(function,?N)??
//即：每隔N秒把function事件推到消息隊(duì)列中

1. 使用setInterval時(shí)，某些間隔會(huì)被跳過；
2. 可能多個(gè)定時(shí)器會(huì)連續(xù)執(zhí)行；

4. 為什么要clearTimeout(this.timer)

'scss'?scoped>

5. 使用 diffTime

'scss'?scoped>

this.days?=?dd?||?0;
this.hours?=?hh?||?0;
this.mins?=?mm?||?0;
this.seconds?=?ss?||?0;

this.days?=?dd?||?0;
this.hours?=?hh?||?0;
this.mins?=?mm?||?0;
this.seconds?=?ss?||?0;

6. 添加新功能：可以傳入到期時(shí)間。

??computed:?{
????duration()?{
??????if?(this.end)?{
????????let?end?=?String(this.end).length?>=?13???+this.end?:?+this.end?*?1000;
????????end?-=?Date.now();
????????return?end;
??????}
??????const?time?=?this.isMiniSecond???Math.round(+this.time?/?1000)?:?Math.round(+this.time);
??????return?time;
????}
??},

7. 添加新功能：可以選擇要顯示的內(nèi)容，例如只顯示秒，或者只顯示小時(shí)。

"timeObj"?:time="countDown">
??"count-down">
????"icon">