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

news2025/7/24 2:49:18

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

目录

 一、无处不在的定时任务

二、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点前不到不行。老板告诉你这个东西下班就得做出来,你不做出来也行啊,但你知道你必须做出来。

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

主题模型-LDA

目录 一.LDA的应用方向 二.朴素贝叶斯的分析 三.Gamma函数 四.Beta分布 五.Beta分布的期望 六.LDA涉及的主要问题 1.共轭先验分布 ①.二项分布的最大似然估计 ②.二项分布与先验举例 ③.上述过程的理论解释 ④.先验概率和后验概率的关系 ⑤.伪计数 ⑥.共轭先…

什么品牌的游戏蓝牙耳机比较好?玩游戏延迟低的蓝牙耳机推荐

游戏耳机的出现其实最主要的作用就是让玩家能够更专注的沉浸在游戏世界内,在声音层面去享受游戏的沉浸感,游戏最重要的就是操作灵敏,需要快速通过声音来判断敌人走向,所以小编特意整理了一期玩游戏延迟低的蓝牙耳机。 一、南卡小…

python画图中的几个小技巧

主要解决pandas.DataFrame.plot及matlibplot.pyplot画图中,x轴太稠密及其他设置图中各个组件字体大小等问题,以示例展示为主。import pandas as pd import numpy as np import matplotlib.pyplot as plt import matplotlib as mpl pd.set_option(max_col…

扬帆优配|半天翻倍,“蹭热点”翻车,前期“牛股”已近腰斩

周五上午,A股商场整体走低,多数职业板块和个股跌落,军工和核算机等板块逆势上涨,北向资金半天净卖出额约38亿元。 个股方面,昨夜公告被证监会立案查询的奥联电子股价再度大跌,盘中最贱价较近期高位已腰斩。…

174万亿采购,奔向数字化

采购不单纯发生在外部,更发生在内部,只有两者同时进行,才能完成采购中心从成本到利润中心角色的转变。 作者|斗斗 编辑|皮爷 出品|产业家 数字化,让很多企业业务流程发生了质变。 《2022数字化采购发展报告》显示&#x…

怎么从零开始学黑客,黑客零基础怎么自学

很多朋友对成为黑客很感兴趣,很大原因是因为看到电影中黑客的情节觉的特别的酷,看到他们动动手指就能进入任何系统,还有很多走上黑客之路的朋友仅仅是因为自己的qq被盗了,或者游戏里的装备被别人偷了,想要自己盗回来&a…

第十二章 - 条件判断(case when 和 if)和视图

第十二章 - 条件判断(case when 和 if),和视图(view)if 的用法case when 的用法视图(view)的用法if 的用法 通过使用if函数可以实现数据二分类或者多分类的功能,比如按年龄区分青年…

资源限制类题目七大技巧 解决所有大数据资源限制类问题

有一个无符号整数的文件,数据个数有40亿个,如何通过1G的内存返回出现次数最多的数 1. 对每个数调用哈希函数得到哈希值,将哈希值模上100,进行小文件分类(相同的数一定在同一文件) 2. 将每个小文件内出现次…

前向传播与反向传播参数的更新方式(附公式代码)

前向传播与反向传播意义及其参数的更新方式 文章目录前向传播与反向传播意义及其参数的更新方式一、前言二、前反向传播的作用三、前向传播四、反向传播代码一、前言 因为本身非科班出身,数学又学的很差,一直都是傻瓜式地用tensorflow和pytorch搭网络。…

「RISC-V Arch」SBI 规范解读(下)

第六章 定时器扩展(EID #0x54494D45"TIME") 这个定时器扩展取代了遗留定时器扩展(EID #0x00),并遵循 v0.2 中定义的调用规约。 6.1 函数:设置定时器(FID #0) struct sbi…

同花顺面试(部分)

又没录上,只能凭零星记忆来记录了 知识图谱有了解吗,知道用在你们系统哪个环节吗tomcat内存设置的多大。32位系统的话有限制吗?复盘:后面一想,可能是说32位系统地址寻址空间有限,内存最多4Ggprc你们用的序…

消息队列--Kafka

Kafka简介集群部署配置Kafka测试Kafka1.Kafka简介 数据缓冲队列。同时提高了可扩展性。具有峰值处理能力,使用消息队列能够使关键组件顶住突发的访问压力,而不会因为突发的超负荷的请求而完全崩溃。 Kafka是一个分布式、支持分区的(partition…

C/C++开发,无可避免的内存管理(篇一)-内存那些事

一、内存管理机制 任何编程语言在访问和操作内存时都会涉及大量的计算工作。但相对其他语言,c/c开发者必须自行采取措施确保所访问的内存是有效的,并且与实际物理存储相对应,以确保正在执行的任务不会访问不应该访问的内存位置。C/C语言及编译…

【Java】volatile

一、volatile volatile是Java虚拟机提供的轻量级的同步机制,它有3个特性: 1)保证可见性 2)不保证原子性 3)禁止指令重排 当写一个volatile变量时,JMM会把该…

openEuler部署Ceph集群(块存储)

openEuler部署Ceph集群1 目标2 环境2.1 服务器信息2.2 软件信息3 部署流程3.1 获取系统镜像3.2 创建虚拟机3.3 配置虚拟机3.3.1 配置互信3.3.2 关闭防火墙3.3.3 配置免密登录3.3.4 配置NTP3.3.4.1 安装NTP服务3.3.4.2 配置NTP服务端3.3.4.3 配置NTP客户端3.3.4.4 启动NTP服务3.…

pyqt5通过CANoe COM Server来操作CANoe仿真工程

文章目录前言一、COM接口技术二、UI界面设计三、功能实现四、工程运行测试前言 继续学习《CANoe开发从入门到精通》。 今天在《CANoe仿真工程开发》的基础上,开发实现pyqt5应用程序来操控CANoe工程。 一、COM接口技术 COM(Component Object Model&…

Linux基础命令-find搜索文件位置

文章目录 find 命令介绍 语法格式 命令基本参数 参考实例 1)在root/data目录下搜索*.txt的文件名 2)搜索一天以内最后修改时间的文件;并将文件删除 3)搜索777权限的文件 4)搜索一天之前变动的文件复制到test…

不懂什么是智慧工厂,看这篇文章就够了!

一、智慧工厂是什么? 一直以来,自动化在某种程度上始终是工厂的一部分,甚至高水平的自动化也非新生事物。然而,“自动化”一词通常表示单一且独立的任务或流程的执行。过去,机器自行“决策”的情况往往是以自动化为基…

【基础篇】9 # 排序:冒泡排序(Bubble Sort)、插入排序(Insertion Sort)、选择排序(Selection Sort)

说明 【数据结构与算法之美】专栏学习笔记 如何分析一个排序算法? 1、排序算法的执行效率 最好情况、最坏情况、平均情况时间复杂度时间复杂度的系数、常数 、低阶比较次数和交换(或移动)次数 2、排序算法的内存消耗 3、排序算法的稳定…

Fabric.js使用说明Part 2

目录一、Fabric.js使用说明Part 1Fabric.js简介 开始方法事件canvas常用属性对象属性图层层级操作复制和粘贴二、Fabric.js使用说明Part 2锁定拖拽和缩放画布分组动画图像滤镜渐变右键菜单删除三、Fabric.js使用说明Part 3自由绘画绘制背景图片绘制文本绘制线和路径一、锁定Fab…