自学前端,你必须要掌握的3种定时任务

63748e72dc314943857316f3b1f6a386.gif#pic_center

当你看到这篇博客的时候,一定会和狗哥结下不解之缘,因为狗哥的博客里不仅仅有代码,还有很多代码之外的东西,如果你可以看到最底部,看到投票环节,我相信你一定感觉到了,狗哥的真诚,狗哥是都么的,能,胡说八道。

目录

 一、无处不在的定时任务

二、setTimeout的使用

1. setTimeout的使用场景

2. 替代setInterval 

三、setInterval的使用

1. setInterval的使用场景

2.  项目中会遇到的问题

四、node-schedule的使用

1. node-schedule的使用场景

2.  简单使用node-schedule

3. 执行钥匙Corn

4. Corn在项目中的问题 

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

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


 

 一、无处不在的定时任务

f9008b4d14904e35b1c7cdae3c1812a8.png

定时任务,简单的理解就是多久后做什么,每隔多久做什么 。你是否感觉到了,其实定时任务是一个无处不在的东西,

 比如电商平台的秒杀倒计时,每隔一秒就要执行一次,给你一种快要结束的紧迫感;比如我们从12306买车票,支付页的倒计时,每隔一秒就会告诉你,你的订单再不支付,票就不属于;比如产品人员告诉我们,每天晚上12点,要备份A表的数据;比如页面加完成后的1分钟后,自动跳转到其他某个页面去。

再比如HR告诉你,下午3点去一下会议室,有重要的事情要谈;比如每天9点你都不得不开始工作,迟到就不行;比如每天9:30都会开早会,组长总是风雨无阻,你不去他就看你不顺眼;比如每个月15号才会发工资,早一天都不会给你;比如65岁才退休,他不管你35岁到65岁之间干啥去了,也不管你是不是有公司嫌你35岁是大龄码农了。

这都是定时器,他会在固定的时间告诉你,你必须去做这件事,程序中有代码去控制,生活中有一只无形的手,你看不见,他却控制着你。

 

二、setTimeout的使用

c52292a65f694894a4e3059d5b6456d5.png 

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的使用

88f33a1549994cbb941d3808db897856.png 

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服务端,也别给自己挖坑说自己做过。你不说他们也不会问,这不丢人,放心吧。

 

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

1ff019b05fa144ef9cedd9c9a3cd75b9.png

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

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

人生就像一个大的定时器,大的定时器里面又环环紧扣了一个个的小定时器,他们无形却似有形,直到那个你不知道的永恒。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/26.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构——第4章 数组与广义表(2)

矩阵1.特殊矩阵的压缩存储1.1对称矩阵1.2.三角矩阵1.2.1.下三角矩阵1.2.2. 上三角矩阵1.3 带状矩阵2.稀疏矩阵2.1. 稀疏矩阵的三元组表存储2.1.1. 稀疏矩阵的转置1.特殊矩阵的压缩存储 矩阵与二维数组具有很好的对应关系,因此在进行科学计算时,常常用二…

两年外包生涯做完,感觉自己废了一半....

先说一下自己的情况。大专生,17年通过校招进入湖南某软件公司,干了接近2年的点点点,今年年上旬,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了五年的功能测试…

Leetcode. 88合并两个有序数组

合并两个有序数组 文章目录归并思路二归并 核心思路: 依次比较,取较小值放入新数组中 i 遍历nums1 , j 遍历nums2 ,取较小值放入nums3中 那如果nums[i] 和nums[j]中相等,随便放一个到nums3 那如果nums[i] 和nums[j]中相…

Form Generator扩展 文本 组件

一、form-generator是什么?✨ ⭐️ 🌟 form-generator的作者是这样介绍的:Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。 但目前它提供的组件并不能满足我们在项目中的…

2023年再不会Redis,就要被淘汰了

目录专栏导读一、同样是缓存,用map不行吗?二、Redis为什么是单线程的?三、Redis真的是单线程的吗?四、Redis优缺点1、优点2、缺点五、Redis常见业务场景六、Redis常见数据类型1、String2、List3、Hash4、Set5、Zset6、BitMap7、Bi…

英雄算法学习路线

文章目录零、自我介绍一、关于拜师二、关于编程语言三、算法学习路线1、算法集训1)九日集训2)每月算法集训2、算法专栏3、算法总包四、英雄算法联盟1、英雄算法联盟是什么?2、如何加入英雄算法联盟?3、为何会有英雄算法联盟&#…

【Linux修炼】16.共享内存

每一个不曾起舞的日子,都是对生命的辜负。 共享内存一.共享内存的原理二.共享内存你的概念2.1 接口认识2.2演示生成key的唯一性2.3 再谈key三.共享资源的查看3.1 如何查看IPC资源3.2 IPC资源的特征3.3 进程之间通过共享内存进行关联四.共享内存的特点五.共享内存的内…

10个最频繁用于解释机器学习模型的 Python 库

文章目录什么是XAI?可解释性实践的步骤技术交流1、SHAP2、LIME3、Eli54、Shapash5、Anchors6、BreakDown7、Interpret-Text8、aix360 (AI Explainability 360)9、OmniXAI10、XAI (eXplainable AI)XAI的目标是为模型的行为和决定提供有意义的解释,本文整理…

C++基础算法①——高精度加减法计算

高精度算法1.导论2.高精度低精度3.高精度高精度4.高精度减法1.导论 当我们利用计算机进行数值计算,有时候会遇到这样的问题: n!的精确结果是多少? 当n小于30的时候,我们当然可以通过电脑自带的计算器计算出来。但是当…

「Vue面试题」动态给vue的data添加一个新的属性时会发生什么?怎样去解决的?

一、直接添加属性的问题 我们从一个例子开始 定义一个p标签&#xff0c;通过v-for指令进行遍历 然后给botton标签绑定点击事件&#xff0c;我们预期点击按钮时&#xff0c;数据新增一个属性&#xff0c;界面也 新增一行 <p v-for"(value,key) in item" :key&q…

学习 Python 之 Pygame 开发坦克大战(一)

学习 Python 之 Pygame 开发坦克大战&#xff08;一&#xff09;Pygame什么是Pygame?初识pygame1. 使用pygame创建窗口2. 设置窗口背景颜色3. 获取窗口中的事件4. 在窗口中展示图片(1). pygame中的直角坐标系(2). 展示图片(3). 给部分区域设置颜色5. 在窗口中显示文字6. 播放音…

如何在CSDN中使用ChatGPT

本篇文章致力于帮助大家理解和使用ChatGPT&#xff08;现在CSDN改成”C知道“了&#xff09;。简介ChatGPT是OpenAI公司开发的一种大型语言模型。它是一种基于Transformer架构的深度学习模型&#xff0c;可以对语言进行建模和生成。它可以处理问答、对话生成、文本生成等多种任…

1.认识网络爬虫

1.认识网络爬虫网络爬虫爬虫的合法性HTTP协议请求与响应(重点)网络爬虫 爬虫的全名叫网络爬虫&#xff0c;简称爬虫。他还有其他的名字&#xff0c;比如网络机器人&#xff0c;网络蜘蛛等等。爬虫就好像一个探测机器&#xff0c;它的基本操作就是模拟人的行为去各个网站溜达&am…

TCP/IP协议

✏️作者&#xff1a;银河罐头 &#x1f4cb;系列专栏&#xff1a;JavaEE &#x1f332;“种一棵树最好的时间是十年前&#xff0c;其次是现在” 目录TCP/IP协议应用层协议自定义应用层协议DNS传输层协议端口号UDP协议UDP协议端格式TCP协议TCP协议段格式TCP工作机制确认应答(安…

单片机怎么实现真正的多线程?

所谓多线程都是模拟的&#xff0c;本质都是单线程&#xff0c;因为cpu同一时刻只能执行一段代码。模拟的多线程就是任务之间快速切换&#xff0c;看起来像同时执行的样子。据说最近有多核的单片机&#xff0c;不过成本应该会高很多。对于模拟的多线程&#xff0c;我知道的有两种…

html实现浪漫的爱情日记(附源码)

文章目录1.设计来源1.1 主界面1.2 遇见1.3 相熟1.4 相知1.5 相念2.效果和源码2.1 动态效果2.2 源代码2.3 代码结构源码下载更多爱情表白源码作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/129264757 html实现浪漫的爱情…

【C++】红黑树

文章目录红黑树的概念红黑树的性质特征红黑树结点的定义红黑树的插入操作情况1情况2情况3特殊情况代码实现红黑树的验证红黑树的删除红黑树和AVL树的比较红黑树的应用红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但是每一个结点都增加一个存储位表示结点的颜…

把C#代码上传到NuGet,大佬竟是我自己!!!

背景 刚发表完一篇博客总结自己写标准化C#代码的心历路程&#xff0c;立马就产生一个问题&#xff0c;就是我写好标准化代码后&#xff0c;一直存放磁盘的话&#xff0c;随着年月增加&#xff0c;代码越来越多&#xff0c;项目和版本的管理就会成为一个令我十分头疼的难题&…

可路由计算引擎实现前置数据库

很多大机构都会有个中央数据仓库负责向应用提供数据服务。随着业务的发展&#xff0c;中央数据仓库的负载在持续增加。一方面&#xff0c;数仓是前端应用的数据后台&#xff0c;而前端应用不断增多&#xff0c;用户访问的并发数也不断增长。另一方面&#xff0c;数仓还要承担原…

ChatGPT在工业领域的用法

在工业数字化时代&#xff0c;我们需要怎么样的ChatGPT&#xff1f; 近日&#xff0c;ChatGPT热度高居不下&#xff0c;强大的人机交互能力令人咋舌&#xff0c;在国内更是掀起一股讨论热潮。一时间&#xff0c;这场由ChatGPT引起的科技飓风&#xff0c;使得全球最顶尖科技力量…