位置: IT常识 - 正文

定时器 setTimeout、setInterval详解(定时器计数器实验报告)

编辑:rootadmin
定时器 setTimeout、setInterval详解

推荐整理分享定时器 setTimeout、setInterval详解(定时器计数器实验报告),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:定时器设置时间步骤,定时器怎么调,定时器怎么调,定时器设置时间步骤,定时器开关怎么接线,定时器开关怎么设置时间,定时器开关怎么接线,定时器怎么设置时间视频教程,内容如对您有帮助,希望把文章链接给更多的朋友!

定时器:按我个人理解来说就是固定某个时间后,时间到了,就提醒我时间到了。

程序中的定时器:相当于倒计时,也相当于计时器。作用是在设定的某个时间后,执行特定的方法。

我们先来了解一下setTimeout定时器,他的特点就是只能用一次,也称为一次性定时器。

setTimeout( func, time, argument1, argument2, .... );语法解析: 1、func:固定时间后执行的方法 2、time:设置固定的时间-按毫秒计算 3、argument:传入方法的参数案例:setTimeout(function(name,gender){console.log(name + " is " + gender);}, 1000, "Tom", "boy");简写:setTimeout((name,gender) => {console.log(name + " is " + gender);}, 1000, "Tom", "boy");案例解析:开启了一个一次性定时器,1秒后执行我给定的函数。

接着看看 setInterval定时器,他的特点就是可以重复执行给定的函数。

setInterval ( func, time, argument1, argument2, .... );语法解析: 同 setTimeout参数意义一致案例:setInterval(function(name,gender){console.log(name + " is " + gender);}, 1000, "Tom", "boy");简写:setInterval((name,gender) => {console.log(name + " is " + gender);}, 1000, "Tom", "boy");案例解析:开启了一个重复定时器,每隔1秒执行我给定的函数。

接下来就开始圈重点了: 定时器概念了解了,也会造定时器了,那这个定时器什么时候调用呢,因为我们的 javaScript代码是从上到下,逐行执行,那到了定时器这行我们的进程会不会等定时器执行完了再执行定时器后面的代码呢?答案是不会等!

遇到定时器,会将定时器加入到任务队列中(宏任务),等所有代码执行完了,程序会看一下队列中还有什么没有完成的 ,如果有没完成的,就执行一下。

这样说可能有点抽象,看下案例好了。

console.log("1 ===>");setTimeout(function(name,gender){ console.log(name + " is " + gender);}, 1000, "Tom", "boy");console.log("2 ===>");执行结果:> "1 ===>"> "2 ===>"> "Tom is boy"

注意:任务队列里的执行顺序是按先来后到的

接下来再深入理解一下,我们先思考一个问题,一次性定时器和重复性定时器区别在哪,不可能就只是调一次和调多次这么简单吧。

提醒:接下来的内容比较重要,有点抽象但需要理解透彻

案例:假设我们需要每隔一秒控制台输出一句话。

结合我们本文的学习,给出思路:

1、一次性定时器的函数里再调定时器,形成循环。

定时器 setTimeout、setInterval详解(定时器计数器实验报告)

2、开启一个重复性定时器

编写实现代码:

思路1:setTimeout(function run(name,gender){ console.log(" hello"); setTimeout(run,1000);}, 1000);思路2:setInterval(()=>{console.log("hello")},1000);

看到这大家可能会不禁感叹,就这?就这?这哪复杂了,逗我呢。 那不妨思考一下,第二个一次性定时器啥时候开始执行呢?第三个呢?第n个呢?程序运行的第n秒?

那我稍微改造一下刚刚的案例好了

setTimeout(function run(name,gender){ console.log("1 ===>"); setTimeout(run,1000); console.log("2 ===>");}, 1000);

接着可以思考一下输出的结果是什么。

然后再来思考重复性定时器,第二次函数调用是啥时候执行呢?第三个呢?第n个呢?

再稍微改造一下好了

let start = Date.now(); // 程序一运行的时间let times = []; // 用来记录运行时间的数组let sTime = setInterval(()=>{ times.push(Date.now() - start); // 记录下执行时间 if (start + 5000 < Date.now()) { console.log(times); }},1000);

好了,留些时间思考一下…

思考好了吗,好了的话一起揭晓一下答案吧。

第一种情况:> "1 ===>"> "2 ===>"> "1 ===>"> "2 ===>"第二种情况:> Array [1001, 2003, 3003, 4000, 5000, 6000]分析:情况1:思考这个问题就可 -> 输出 "1 ===>" 之后我开启了另一个定时器,此时是不是应该再输出"1 ===>"?然后就进入了定时器循环,结果一直只有"1 ===>"?结合我们的结果,可以发现下一个定时器是什么时候开的?没错,执行完第一个定时器函数内的代码后再执行的。情况2:根据时间的间隔很容易知道时间就是1秒上下几毫秒,所以下一个定时器是第一个定时器时间结束后立即开启的。这就是他们两个比较靠底层的区别。总结的话就留给大家自己总结吧,毕竟一千个读者就会有一千个读者(哈哈,开个玩笑,说句可能像话的话😄)。

现在我们已经大致了解了定时器以及触发时间,那么会造定时器了不会取消就有点说不过去了,下面一起看看怎么取消定时器。

let timerId1 = setTimeout(...);clearTimeout(timerId1); // 取消一次性定时器,timeId1 是唯一且必传参数let timerId2 = setInterval(...);clearInterval(timerId2)。 // 取消重复定时器,timeId2 是唯一且必传参数

注意:定时器开启了一定要关闭,要做到有始有终,不然会一直消耗内存,到时候就就很容易程序崩溃。

还有一个留最后讲的,因为比较细节。

下面我们来看个案例

let start = Date.now();let times = [];setTimeout(function run() { times.push(Date.now() - start); // 保存前一个调用的延时 if (start + 50 < Date.now()) console.log(times); // 100 毫秒之后,显示延时信息 else setTimeout(run); // 否则重新调度});结果:> Array [1, 2, 4, 5, 9, 13, 18, 22, 27, 32, 36, 42, 46, 50, 55]let start = Date.now(); // 程序一运行的时间let times = []; // 用来记录运行时间的数组let sTime = setInterval(()=>{ times.push(Date.now() - start); // 记录下执行时间 if (start + 50 < Date.now()) { console.log(times); clearInterval(sTime); // 清除定时器 }});结果:> Array [1, 2, 3, 4, 8, 13, 16, 20, 25, 28, 32, 36, 40, 44, 48, 53]

感兴趣的同学可以分别思考一下这两组数组的规律,然后再往下看

好了,这就不卖关子了,直接把结论告诉大家吧

浏览器会将 setTimeout 或 setInterval 的五层或更多层嵌套调用(调用五次之后)的最小延时限制在 4ms。这是历史遗留问题。

最后,大家拷贝案例执行的时候,运行的结果很大概率和我这个结果不一样,影响的因素有浏览器版本、类型等等问题。不过这也不影响结论是正确的 ^ _ ^ , 好了,文章到这就结束了,有问题大家可以在评论区留言哈,拜拜👋

本文链接地址:https://www.jiuchutong.com/zhishi/295279.html 转载请保留说明!

上一篇:【uni-app教程】四、UniAPP 路由配置及页面跳转(uni-app入门到实战)

下一篇:ntp-keygen命令 生成NTP主机密钥(ntpdate 命令)

  • 抖音极速版怎么看浏览记录(抖音极速版怎么没有红包圈圈了)

    抖音极速版怎么看浏览记录(抖音极速版怎么没有红包圈圈了)

  • 爱奇艺怎么竖屏观看(爱奇艺如何竖屏)

    爱奇艺怎么竖屏观看(爱奇艺如何竖屏)

  • 因硕智能锁是品牌吗(因硕智能锁品牌简介)

    因硕智能锁是品牌吗(因硕智能锁品牌简介)

  • iphone开不了机提取照片(iphone开不了机是什么问题)

    iphone开不了机提取照片(iphone开不了机是什么问题)

  • 内存不兼容的表现(内存不兼容什么意思)

    内存不兼容的表现(内存不兼容什么意思)

  • x620是乐视什么型号(乐视x620什么处理器)

    x620是乐视什么型号(乐视x620什么处理器)

  • 微信拉黑在删除对方后还能搜到吗(微信拉黑在删除是什么样子,我发消息给他是什么样子的)

    微信拉黑在删除对方后还能搜到吗(微信拉黑在删除是什么样子,我发消息给他是什么样子的)

  • 苹果通知声音怎么调小(苹果通知声音怎么关掉)

    苹果通知声音怎么调小(苹果通知声音怎么关掉)

  • qq聊天记录换个手机还有吗(QQ聊天记录换个手机还会有吗)

    qq聊天记录换个手机还有吗(QQ聊天记录换个手机还会有吗)

  • 缩进2字符什么意思(缩进二字)

    缩进2字符什么意思(缩进二字)

  • 电脑一直在响怎么回事(电脑一直在响怎么解决)

    电脑一直在响怎么回事(电脑一直在响怎么解决)

  • 手机关闭qq天气定位(手机版qq天气怎样关闭)

    手机关闭qq天气定位(手机版qq天气怎样关闭)

  • 手机发热是电池的原因还是手机的问题(手机发热是电池的原因吗)

    手机发热是电池的原因还是手机的问题(手机发热是电池的原因吗)

  • 什么情况下显示2g在线(微信的正在输入是什么情况下显示)

    什么情况下显示2g在线(微信的正在输入是什么情况下显示)

  • word怎么设置图片样式(word怎么设置图文混排)

    word怎么设置图片样式(word怎么设置图文混排)

  • 快手不能直播是什么原因(快手不能直播是怎么回事)

    快手不能直播是什么原因(快手不能直播是怎么回事)

  • 手机怎么测体脂(手机测体重体脂软件)

    手机怎么测体脂(手机测体重体脂软件)

  • oppo reno2极夜模式怎么开(opporeno5pro+极夜模式)

    oppo reno2极夜模式怎么开(opporeno5pro+极夜模式)

  • 小米智能出行助手(小米智能出行助手怎么用)

    小米智能出行助手(小米智能出行助手怎么用)

  • 华为用户体验怎么关闭(华为用户体验计划在哪)

    华为用户体验怎么关闭(华为用户体验计划在哪)

  • 呼到死怎么屏蔽

    呼到死怎么屏蔽

  • 发圈文字折叠了怎么办(发朋友圈字折叠)

    发圈文字折叠了怎么办(发朋友圈字折叠)

  • 怎么取消手机屏幕上右上角这个HD(怎么取消手机屏幕推荐)

    怎么取消手机屏幕上右上角这个HD(怎么取消手机屏幕推荐)

  • 集成显卡驱动怎么安装(集成显卡驱动怎么看)

    集成显卡驱动怎么安装(集成显卡驱动怎么看)

  • hibernate和mybatis区别(hibernate和mybatis的优缺点)

    hibernate和mybatis区别(hibernate和mybatis的优缺点)

  • 运用pyecharts制作可视化大屏(代码展示及效果图-动图)(pyecharts 表格)

    运用pyecharts制作可视化大屏(代码展示及效果图-动图)(pyecharts 表格)

  • 金税四期什么时候正式上线
  • 公司内控制度由谁制定
  • 管家婆未开账可以录入单据吗
  • 收到保险公司开票怎么做账
  • 买一赠一销售收入计算案例
  • 买一赠一视同销售征收增值税吗
  • 无形资产账面价值和可收回金额孰低摊销吗
  • 速动比率和流动比率下降说明什么
  • 支付的管理费用可以抵税吗
  • 政府补助计入资本公积是老准则吗
  • 未计提坏账准备金额在哪个科目
  • 结转已完工产品会计分录
  • 企业所得税月交还是年交
  • 劳务派遣企业的规上企业认定标准
  • 专用发票百万元版申请要求
  • 小规模纳税人年度不超过500万
  • 补开去年的发票怎么结转成本?
  • 营业外支出期末需要结转吗
  • 物流服务费税率是多少
  • win10一段时间不动黑屏
  • 鸿蒙系统字体不太好看
  • 电脑进不了系统怎么用u盘重装
  • stk al00华为
  • 单位撤销现金余额的规定
  • 代销商品受托方记账
  • chat gpt介绍开头
  • php生成随机字符串源,且不会重复出现
  • phpcms怎么用
  • 销售材料计提存入什么
  • 浅谈php表单提交的问题
  • 关于企业财务会计的说法正确的是
  • php分层
  • Sklearn GridSearchCV跑SVM很慢或卡死解决办法,SVM线性核函数卡死
  • js中的变量
  • 投标代理费应如何支付
  • 利息发票可以抵扣吗
  • js正数转负数
  • mongodb介绍
  • 工会经费的计提基数不包括
  • 普通发票和增值税发票的税率
  • 金蝶软件怎么录入发票号
  • sql server 2000数据库不能备份的原因
  • 发票丢失一张罚款标准
  • 租赁费的增值税可以抵扣吗
  • 计划成本法有什么差异
  • 附加税怎么算出来的
  • 外汇收入需要缴纳增值税吗
  • 劳务公司核定征收怎么交税的
  • 开票收入摘要怎么写
  • 到期不续约补偿金怎么算
  • 奖励员工购物卡怎么写
  • 期初建帐
  • 实收资本主要包括哪些
  • 排污费计入管理费用吗
  • 党建信息的重要性
  • 小规模纳税人应纳增值税额的计算
  • mysql中数据表的关联关系有哪三种?
  • 如何删除多余的空白表格
  • 0x80070718配额不足
  • linux 查看so
  • linuxcut命令详解
  • 苹果机的mac地址
  • 安装centos7.0
  • win10内置应用大全
  • surface pro7应用
  • win7怎么删除右键菜单
  • Linux通过shell脚本创建SVN版本库简化创建过程
  • cocos2dx游戏案例
  • jquery showdialog
  • linux for i in
  • vue3 todo
  • jquery动画效果代码
  • unity破解安装教程
  • unity相关问题
  • javascript基于什么的语言
  • androidapk网站
  • 商业保险扣除限额企业所得税
  • 贵州省国家税务局电子税务局官网
  • 安徽省税务干部学校
  • 浙江医保怎么使用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设