如何定位前后端问题（自学前端，你必须要掌握的3种定时任务）
当你看到这篇博客的时候 ，一定会和狗哥结下不解之缘 ，因为狗哥的博客里不仅仅有代码 ，还有很多代码之外的东西 ，如果你可以看到最底部 ，看到投票环节 ，我相信你一定感觉到了 ，狗哥的真诚 ，狗哥是都么的 ，能 ，胡说八道 。
目录
一 、无处不在的定时任务
二 、setTimeout的使用
1. setTimeout的使用场景
2. 替代setInterval
三 、setInterval的使用
1. setInterval的使用场景
2. 项目中会遇到的问题
四 、node-schedule的使用
1. node-schedule的使用场景
2. 简单使用node-schedule
3. 执行钥匙Corn
4. Corn在项目中的问题
5. 自学前端有没有必要学习node
五 、定时器代码之外的思考
一 、无处不在的定时任务
定时任务 ，简单的理解就是多久后做什么 ，每隔多久做什么 。你是否感觉到了 ，其实定时任务是一个无处不在的东西 ，
比如电商平台的秒杀倒计时 ，每隔一秒就要执行一次 ，给你一种快要结束的紧迫感；比如我们从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的区别了 。
4. Corn在项目中的问题
竟然这个Corn定时钥匙如此准确 ，规定了哪一分钟那一秒钟去执行 ，去取数据 ，比如你写的是每分钟的第10秒去获取 ，这本没有问题 。比如全公司都公用一个配置平台呢 ，你每分钟的第10秒去获取 ，那比如你这个项目用到了N台机器呢 ，这N台是否要都是每分钟的第10秒去获取？那如果全公司的N个业务系统都这么写呢 ，会有什么问题呢？哈哈 ，如果听明白了狗哥的意思 ，欢迎和狗哥交流 。
5. 自学前端有没有必要学习node
其实我觉得对于自学前端 ，急于找到前端开发工作的人 ，没有太大必要去学习node服务端知识 。你基本把纯前端的知识学到位已经很不容易了 。但如果有时间 ，还是建议简单学习一下 ，哪怕只是搭个koa的架子 ，练习着写一下接口数据格式 。一旦自己练习写过接口数据 ，自己再从前端发送ajax调用一下 ，我相信你将会有一个更全面的对开发项目的认知 ，在你遇到问题的时候 ，有更多的解决思路 。
但如果你没有学透 ，千万别在简历上写你精通node服务端 ，也别给自己挖坑说自己做过 。你不说他们也不会问 ，这不丢人 ，放心吧 。
五 、定时器代码之外的思考
狗哥觉得其实即便你做了开发 ，也不应该生活中只有开发 ，我们努力工作是为了生活 ，为了更好的生活 ，所以狗哥更偏向于基于故事讲基础知识点 ，也更喜欢着力于知识点冒出个小故事（这句话换成抓手咋说？） 。
慢慢的 ，习惯了开发中的定时任务 ，我们清楚的知道几秒后该让网页执行一件什么事 ，每天几点该执行一件什么事 ，可能觉得已经能够胜任工作了 ，但久而久之 ，你到了一定的时刻就必须得离开学校 ，赖在那里也没有用 ，到了一定的时机 ，你就需要结婚生子去面对 。没人有强拉着你9点前必须到公司 ，但你知道9点前不到不行 。老板告诉你这个东西下班就得做出来 ，你不做出来也行啊 ，但你知道你必须做出来 。
人生就像一个大的定时器 ，大的定时器里面又环环紧扣了一个个的小定时器 ，他们无形却似有形 ，直到那个你不知道的永恒 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！