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前端必须要掌握的定时任务有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。