web前端必須要掌握的定時(shí)任務(wù)有哪些

這篇文章主要介紹了web前端必須要掌握的定時(shí)任務(wù)有哪些的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇web前端必須要掌握的定時(shí)任務(wù)有哪些文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

一、無(wú)處不在的定時(shí)任務(wù)

定時(shí)任務(wù)，簡(jiǎn)單的理解就是多久后做什么，每隔多久做什么 。你是否感覺(jué)到了，其實(shí)定時(shí)任務(wù)是一個(gè)無(wú)處不在的東西，

比如電商平臺(tái)的秒殺倒計(jì)時(shí)，每隔一秒就要執(zhí)行一次，給你一種快要結(jié)束的緊迫感；比如我們從12306買車票，支付頁(yè)的倒計(jì)時(shí)，每隔一秒就會(huì)告訴你，你的訂單再不支付，票就不屬于；比如產(chǎn)品人員告訴我們，每天晚上12點(diǎn)，要備份A表的數(shù)據(jù)；比如頁(yè)面加完成后的1分鐘后，自動(dòng)跳轉(zhuǎn)到其他某個(gè)頁(yè)面去。

再比如HR告訴你，下午3點(diǎn)去一下會(huì)議室，有重要的事情要談；比如每天9點(diǎn)你都不得不開(kāi)始工作，遲到就不行；比如每天9:30都會(huì)開(kāi)早會(huì)，組長(zhǎng)總是風(fēng)雨無(wú)阻，你不去他就看你不順眼；比如每個(gè)月15號(hào)才會(huì)發(fā)工資，早一天都不會(huì)給你；比如65歲才退休，他不管你35歲到65歲之間干啥去了，也不管你是不是有公司嫌你35歲是大齡碼農(nóng)了。

這都是定時(shí)器，他會(huì)在固定的時(shí)間告訴你，你必須去做這件事，程序中有代碼去控制，生活中有一只無(wú)形的手，你看不見(jiàn)，他卻控制著你。

二、setTimeout的使用

1. setTimeout的使用場(chǎng)景

setTimeout的使用場(chǎng)景規(guī)定為多久后執(zhí)行什么，只執(zhí)行一次。今天我們簡(jiǎn)單實(shí)現(xiàn)一個(gè)場(chǎng)景，場(chǎng)景規(guī)定在頁(yè)面在加載完成之初不去加載某些東西，以減少首次加載的內(nèi)容，降低首屏渲染的壓力。當(dāng)首屏組件加載完成之后的500毫秒，我們才去加載一些額外的東西。

以vue為例，例如首屏都放在了a.vue下，我們知道m(xù)ounted生命周期可以表示這個(gè)組件DOM已加載完成，但組件加載完成，不代表圖片和請(qǐng)求都已完成渲染了，所以我們預(yù)留了500毫秒，代碼如下：

。。。 // 表示a.vue其余代碼
mounted() {
    let timeout1 = setTimeout(() => {
        // 需要延遲做的事情
        // 并且延遲完畢要清除setTimeout
        timeout1 = null;
        window.clearTimeout(timeout1);
    }, 500)
},

2. 替代setInterval

很多時(shí)候我們不建議使用setInterval，這個(gè)原因下面說(shuō)，雖然setTimeout是單次執(zhí)行，但執(zhí)行完了再在里面執(zhí)行一次不就成了多次執(zhí)行了嘛。

例如我們實(shí)現(xiàn)一個(gè)累加器，從0開(kāi)始累加，超級(jí)棒的代碼就像下面這樣，是不是很棒，我的代碼又不是不能跑，就算代碼不能跑，我能跑得了唄。

var num = 0;
setTimeout(() => {
    num += 1;
    setTimeout(() => {
        num += 1;
        setTimeout(() => {
            num += 1;
            ......
            setTimeout(() => {
                num += 1;
            }, 970)
        }, 970)
    }, 970)
}, 970)

但如果由于某些原因自己需要這份工作呢，自己跑不了，那就得把代碼修改一下，讓他不這么棒，變得辣雞一些

var num = 0;
function timeoutFn() {
   setTimeout(() => {
      num += 1;
      timeoutFn();
   }, 970)
   console.log('經(jīng)海路大白狗看一下num吧', num);
}
timeoutFn();

三、setInterval的使用

1. setInterval的使用場(chǎng)景

很顯然，setInterval強(qiáng)調(diào)多次，定時(shí)的去執(zhí)行。比如定時(shí)累加器，比如定時(shí)輪訓(xùn)獲取而不用socket長(zhǎng)鏈接，比如我們常見(jiàn)的輪播圖3秒動(dòng)一次。今天我們不做數(shù)字累加1的場(chǎng)景，那樣太low了，我們做一個(gè)累加13的，而且當(dāng)數(shù)值累加到大于等于100的時(shí)候再重新從0開(kāi)始往上累加。

有沒(méi)有發(fā)現(xiàn)狗哥博客的一個(gè)特點(diǎn)，我不斷的在強(qiáng)調(diào)項(xiàng)目場(chǎng)景，項(xiàng)目場(chǎng)景，就是希望你不要把知識(shí)點(diǎn)孤立起來(lái)，知識(shí)點(diǎn)是要用于實(shí)戰(zhàn)的，我們學(xué)再多開(kāi)發(fā)知識(shí)點(diǎn)最終都是要走向公司去掙工資的。

var num = 0;
setInterval(() => {
   if (num >= 100) {
        num = 0;
   }
  num += 13;
}, 970)

2.  項(xiàng)目中會(huì)遇到的問(wèn)題

由于瀏覽器和setInterval的特性。setInterval本身他創(chuàng)建的時(shí)候就在堆內(nèi)存中進(jìn)行了存儲(chǔ)，隊(duì)列在內(nèi)存中一直存在，也保證了到下一個(gè)時(shí)間可以準(zhǔn)時(shí)的執(zhí)行，而結(jié)合瀏覽器的特性，瀏覽器發(fā)現(xiàn)這個(gè)堆內(nèi)存后，進(jìn)行了一定的優(yōu)化處理。當(dāng)你的瀏覽器頁(yè)簽不處于屏幕最上方的時(shí)候，瀏覽器則會(huì)將這個(gè)定時(shí)任務(wù)進(jìn)行掛起操作，等這個(gè)瀏覽器頁(yè)簽再恢復(fù)到最上層的時(shí)候，瀏覽器再恢復(fù)其執(zhí)行。

所以我們會(huì)經(jīng)常發(fā)現(xiàn)一個(gè)問(wèn)題，例如輪播圖正在準(zhǔn)時(shí)3秒動(dòng)一次，然后瀏覽器被切走了，等你隔一段時(shí)間回來(lái)后呢，輪播圖就像瘋了一樣的轉(zhuǎn)動(dòng)，然后再繼續(xù)恢復(fù)為3秒一動(dòng)；又或者是在IOS還是什么環(huán)境下來(lái)著，我記得當(dāng)時(shí)是做一個(gè)倒計(jì)時(shí)的功能。當(dāng)瀏覽器切走之前還剩12分鐘，等瀏覽器切走之后呢，倒計(jì)時(shí)就不動(dòng)了，等過(guò)了2分鐘再切回來(lái)的時(shí)候，發(fā)現(xiàn)還是12分鐘，又開(kāi)始倒計(jì)時(shí)。

其實(shí)這個(gè)時(shí)候可以檢測(cè)當(dāng)前瀏覽器是否處于用戶眼前（或者說(shuō)是否被切走了），用這個(gè)代碼來(lái)判斷：

var countSecondFn = null;
function goOnCount() {
    countSecondFn = setInterval(() => {
        // 任務(wù)執(zhí)行
    })
}
document.addEventListener('visibilitychange',function(){
   if(document.visibilityState=='hidden'){
      window.clearInterval(countSecondFn);
      countSecondFn = null;
    }else if(document.visibilityState=='visible'){
      goOnCount(); 
    }
});

所以很多時(shí)候，我們更希望用setTimeout的遞歸來(lái)替換掉setInterval的執(zhí)行，減少更多的問(wèn)題。

四、node-schedule的使用

1. node-schedule的使用場(chǎng)景

node-schedule目前主要用于node服務(wù)端，例如我們的一些頁(yè)面，數(shù)據(jù)是配置出來(lái)的，那么就沒(méi)有必要每次都去請(qǐng)求數(shù)據(jù)庫(kù)，再返回給前端，可以定時(shí)一下，幾分鐘發(fā)送一次請(qǐng)求即可；再比如我們每次升級(jí)上線，為了保證一個(gè)良好的性能，HTML可能會(huì)部署在服務(wù)端，而靜態(tài)資源則部署在另外的服務(wù)器。這樣靜態(tài)資源從v1.0升級(jí)到v1.1，則可以定時(shí)的去獲取配置平臺(tái)的版本號(hào)，然后動(dòng)態(tài)拼接到HTML頁(yè)面上，以保證可以每次升級(jí)拿到最新的靜態(tài)資源。

但node-schedule和setInterval有本質(zhì)上的區(qū)別。node-schedule更強(qiáng)調(diào)哪一天哪個(gè)小時(shí)，哪一分鐘，哪一秒鐘準(zhǔn)確的去執(zhí)行。就像我們經(jīng)常被告知你明天早上9點(diǎn)去做一件什么事情，每天晚上9點(diǎn)你才可以下班。這樣的場(chǎng)景，恐怕setInterval不能夠勝任了。

2.  簡(jiǎn)單使用node-schedule

例如每到10分（3點(diǎn)10分、8點(diǎn)10分。。。12點(diǎn)10分）的時(shí)候，我們?nèi)フ?qǐng)求一下數(shù)據(jù)，第一次請(qǐng)求到的數(shù)據(jù)進(jìn)行緩存處理，再次請(qǐng)求到的數(shù)據(jù)與老數(shù)據(jù)進(jìn)行對(duì)比，如果無(wú)更新則繼續(xù)用緩存數(shù)據(jù)，如果有更新則利用新數(shù)據(jù)。

const schedule = require('node-schedule');
let job = schedule.scheduleJob('* 10 * * * *', () => {
 axios(url, data, (res) => {
    // 與緩存數(shù)據(jù)對(duì)比
    // 后者再犯?jìng)€(gè)懶，不對(duì)比，每次都用新數(shù)據(jù)，請(qǐng)求異常了再用緩存數(shù)據(jù)
 })
});

3. 執(zhí)行鑰匙Corn

上一段代碼中的   * 10 * * * *   呢，就是所謂node-schedule的定時(shí)鑰匙，這6個(gè)星號(hào)從左到右表示：秒 分 小時(shí) 天 月 年 ，這樣看是不是就更明白他的準(zhǔn)確性和與setInterval的區(qū)別了。

關(guān)于“web前端必須要掌握的定時(shí)任務(wù)有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“web前端必須要掌握的定時(shí)任務(wù)有哪些”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。