这篇文章主要介绍了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前端必须要掌握的定时任务有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。