【整理總結】前端必須要掌握的3種定時任務

在前端中，定時是一個很重要的知識點，定時任務是無所不在的。以下這篇文章就來為大家整理總結前端必須要掌握的3種定時任務，希望對大家有幫助！

 一、無所不在的定時任務

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

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

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

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

二、setTimeout的使用

 

1.使用情境

##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的区别了。 

4. Corn在项目中的问题 

竟然这个Corn定时钥匙如此准确，规定了哪一分钟那一秒钟去执行，去取数据，比如你写的是每分钟的第10秒去获取，这本没有问题。比如全公司都公用一个配置平台呢，你每分钟的第10秒去获取，那比如你这个项目用到了N台机器呢，这N台是否要都是每分钟的第10秒去获取？那如果全公司的N个业务系统都这么写呢，会有什么问题呢？哈哈，如果听明白了狗哥的意思，欢迎和狗哥交流。

5. 自学前端有没有必要学习node

其实我觉得对于自学前端，急于找到前端开发工作的人，没有太大必要去学习node服务端知识。你基本把纯前端的知识学到位已经很不容易了。但如果有时间，还是建议简单学习一下，哪怕只是搭个koa的架子，练习着写一下接口数据格式。一旦自己练习写过接口数据，自己再从前端发送ajax调用一下，我相信你将会有一个更全面的对开发项目的认知，在你遇到问题的时候，有更多的解决思路。

但如果你没有学透，千万别在简历上写你精通node服务端，也别给自己挖坑说自己做过。你不说他们也不会问，这不丢人，放心吧。

五、定时器代码之外的思考

 狗哥觉得其实即便你做了开发，也不应该生活中只有开发，我们努力工作是为了生活，为了更好的生活，所以狗哥更偏向于基于故事讲基础知识点，也更喜欢着力于知识点冒出个小故事（这句话换成抓手咋说？）。

慢慢的，习惯了开发中的定时任务，我们清楚的知道几秒后该让网页执行一件什么事，每天几点该执行一件什么事，可能觉得已经能够胜任工作了，但久而久之，你到了一定的时刻就必须得离开学校，赖在那里也没有用，到了一定的时机，你就需要结婚生子去面对。没人有强拉着你9点前必须到公司，但你知道9点前不到不行。老板告诉你这个东西下班就得做出来，你不做出来也行啊，但你知道你必须做出来。

人生就像一個大的定時器，大的定時器裡面又環環緊扣了一個個的小定時器，他們無形卻似有形，直到那個你不知道的永恆。

【推薦學習：javascript影片教學】

#

以上是【整理總結】前端必須要掌握的3種定時任務的詳細內容。更多資訊請關注PHP中文網其他相關文章！