web前端必須要掌握的定時任務有哪些

這篇文章主要介紹了web前端必須要掌握的定時任務有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇web前端必須要掌握的定時任務有哪些文章都會有所收獲，下面我們一起來看看吧。

一、無處不在的定時任務

定時任務，簡單的理解就是多久后做什么，每隔多久做什么 。你是否感覺到了，其實定時任務是一個無處不在的東西，

比如電商平臺的秒殺倒計時，每隔一秒就要執行一次，給你一種快要結束的緊迫感；比如我們從12306買車票，支付頁的倒計時，每隔一秒就會告訴你，你的訂單再不支付，票就不屬于；比如產品人員告訴我們，每天晚上12點，要備份A表的數據；比如頁面加完成后的1分鐘后，自動跳轉到其他某個頁面去。

再比如HR告訴你，下午3點去一下會議室，有重要的事情要談；比如每天9點你都不得不開始工作，遲到就不行；比如每天9:30都會開早會，組長總是風雨無阻，你不去他就看你不順眼；比如每個月15號才會發工資，早一天都不會給你；比如65歲才退休，他不管你35歲到65歲之間干啥去了，也不管你是不是有公司嫌你35歲是大齡碼農了。

這都是定時器，他會在固定的時間告訴你，你必須去做這件事，程序中有代碼去控制，生活中有一只無形的手，你看不見，他卻控制著你。

二、setTimeout的使用

1. setTimeout的使用場景

setTimeout的使用場景規定為多久后執行什么，只執行一次。今天我們簡單實現一個場景，場景規定在頁面在加載完成之初不去加載某些東西，以減少首次加載的內容，降低首屏渲染的壓力。當首屏組件加載完成之后的500毫秒，我們才去加載一些額外的東西。

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

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

2. 替代setInterval

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

例如我們實現一個累加器，從0開始累加，超級棒的代碼就像下面這樣，是不是很棒，我的代碼又不是不能跑，就算代碼不能跑，我能跑得了唄。

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('經海路大白狗看一下num吧', num);
}
timeoutFn();

三、setInterval的使用

1. setInterval的使用場景

很顯然，setInterval強調多次，定時的去執行。比如定時累加器，比如定時輪訓獲取而不用socket長鏈接，比如我們常見的輪播圖3秒動一次。今天我們不做數字累加1的場景，那樣太low了，我們做一個累加13的，而且當數值累加到大于等于100的時候再重新從0開始往上累加。

有沒有發現狗哥博客的一個特點，我不斷的在強調項目場景，項目場景，就是希望你不要把知識點孤立起來，知識點是要用于實戰的，我們學再多開發知識點最終都是要走向公司去掙工資的。

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

2.  項目中會遇到的問題

由于瀏覽器和setInterval的特性。setInterval本身他創建的時候就在堆內存中進行了存儲，隊列在內存中一直存在，也保證了到下一個時間可以準時的執行，而結合瀏覽器的特性，瀏覽器發現這個堆內存后，進行了一定的優化處理。當你的瀏覽器頁簽不處于屏幕最上方的時候，瀏覽器則會將這個定時任務進行掛起操作，等這個瀏覽器頁簽再恢復到最上層的時候，瀏覽器再恢復其執行。

所以我們會經常發現一個問題，例如輪播圖正在準時3秒動一次，然后瀏覽器被切走了，等你隔一段時間回來后呢，輪播圖就像瘋了一樣的轉動，然后再繼續恢復為3秒一動；又或者是在IOS還是什么環境下來著，我記得當時是做一個倒計時的功能。當瀏覽器切走之前還剩12分鐘，等瀏覽器切走之后呢，倒計時就不動了，等過了2分鐘再切回來的時候，發現還是12分鐘，又開始倒計時。

其實這個時候可以檢測當前瀏覽器是否處于用戶眼前（或者說是否被切走了），用這個代碼來判斷：

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

所以很多時候，我們更希望用setTimeout的遞歸來替換掉setInterval的執行，減少更多的問題。

四、node-schedule的使用

1. node-schedule的使用場景

node-schedule目前主要用于node服務端，例如我們的一些頁面，數據是配置出來的，那么就沒有必要每次都去請求數據庫，再返回給前端，可以定時一下，幾分鐘發送一次請求即可；再比如我們每次升級上線，為了保證一個良好的性能，HTML可能會部署在服務端，而靜態資源則部署在另外的服務器。這樣靜態資源從v1.0升級到v1.1，則可以定時的去獲取配置平臺的版本號，然后動態拼接到HTML頁面上，以保證可以每次升級拿到最新的靜態資源。

但node-schedule和setInterval有本質上的區別。node-schedule更強調哪一天哪個小時，哪一分鐘，哪一秒鐘準確的去執行。就像我們經常被告知你明天早上9點去做一件什么事情，每天晚上9點你才可以下班。這樣的場景，恐怕setInterval不能夠勝任了。

2.  簡單使用node-schedule

例如每到10分（3點10分、8點10分。。。12點10分）的時候，我們去請求一下數據，第一次請求到的數據進行緩存處理，再次請求到的數據與老數據進行對比，如果無更新則繼續用緩存數據，如果有更新則利用新數據。

const schedule = require('node-schedule');
let job = schedule.scheduleJob('* 10 * * * *', () => {
 axios(url, data, (res) => {
    // 與緩存數據對比
    // 后者再犯個懶，不對比，每次都用新數據，請求異常了再用緩存數據
 })
});

3. 執行鑰匙Corn

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

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