settimeout的用法_setinterval怎么用

settimeout的用法_setinterval怎么用目录参数及介绍setTimeOutsetInterval工作原理前言:JS是单线程运行的setTimeOutsetInterval情况一:fn运行时间≤时间间隔,即多数情况情况二:fn运行时间>时间间隔,即一些异常情况setTimeOut弥补setInterval的不足本文参考文章参数及介绍setTimeOutsetTimeOut(fn,delayTime)【功能】:在一定时间延迟之后开始执行一个给定的函数【参数1】:fn将要执行的函数,函数类型或者字符串类型【参数2】:

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

一、参数及介绍

setTimeOut

setTimeOut (fn, delayTime)

【功能】:在一定时间延迟之后开始执行一个给定的函数
【参数1】:fn将要执行的函数,函数类型或者字符串类型
【参数2】:delayTime要延迟的时间,Number类型,单位为毫秒
【返回】:一个id值

setInterval

setInterval (fn, interval)

【功能】:每隔时间段interval就调用fn一次
【参数1】: fn将要执行的函数,函数类型或者字符串类型
【参数2】: interval要延迟的时间,Number类型,单位为毫秒
【返回】:一个id值

二、工作原理

前言:JS是单线程运行的

因为 JS 是单线程的,在某一个特定时间点只能执行某一个特定的任务,所以会阻塞其它任务执行。对于耗时的任务(例如网络请求,I/O操作等),没有必要等待他们执行完后才继续后面的操作。在这些任务完成前,JavaScript 完全可以往下执行其他操作,当这些耗时的任务完成后则以回调的方式执行相应处理。这些就是 JavaScript 与生俱来的特性:异步与回调。
信息参考自:关于JavaScript单线程的一些事

setTimeOut

【工作原理】

  • JS是单线程执行,当执行到setTimeOut代码时开始计时,在当到达间隔时间delayTime 之后,把回调函数fn放到事件队列
  • 真正的运行时间取决于主线程何时调用事件队列中fn。(当主线程空闲下来才会去事件队列取出fn函数执行)

运行到 setTimeOut(时间点)| delayTime(时间段) | 调用函数fn(时间点)| fn执行时段(时间段)

setInterval

【工作原理】:
在执行到 setInterval 代码时,会开始计时,到达间隔时间 interval 之后,将判断:目前有没有此定时器的实例?

  • 如果没有,则将 fn 加入到事件队列中
  • 如果有,那么不会将回调函数 fn 加入到事件队列中,防止之后连续调用 fn(即非定时调用)
    弊端:导致一些间隔被跳过

情况一:fn运行时间 ≤ 时间间隔 ,即多数情况

Mon 06 Mon 13 Mon 20 fn运行时间 时间间隔 fn运行时间 时间间隔 fn运行时间 时间间隔 时间线

情况二:fn运行时间 > 时间间隔 ,即一些异常情况

Mon 06 Mon 13 Mon 20 fn运行时间 时间间隔 fn运行时间 时间间隔 fn运行时间 时间间隔 时间线

为什么会这样?

  • JS 为单线程,在一个时间段内全力只作一件事。即执行函数 fn。
  • 在 fn 运行的时,定时器没有能力终止其的运行
  • fn运行时间 > 时间间隔 interval 时,间隔时间到了,但是程序还没有执行完,那也要老老实实的等着函数执行完。

弊端?

  • 实际间隔是fn运行的时间,并非设定的时间间隔 interval,时间不精确。

三、setTimeOut弥补setInterval的不足

setTimeout(function fn(){ 
   
    // 1. 业务逻辑
	console.log('Hi')
	
    // 2. 链式调用 
    setTimeout(fn, interval);
}, interval);
  • 链式调用 setTimeout()
  • 每次函数执行的时候都会创建一个新的定时器。
  • 第二个setTimeout()调用当前执行的函数,并为其设置另外一个定时器。
  • 这样做的好处是,在前一个定时器代码执行完之前,不会向队列插入新的定时器代码,确保不会有任何缺失的间隔。
  • 而且,它可以保证在下一次定时器代码执行之前,至少要等待指定的间隔,避免了连续的运行。

四、本文参考文章

排名不分先后

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/185720.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 服务器pfx文件如何导入,linux 导入pfx 证书

    服务器pfx文件如何导入,linux 导入pfx 证书linux导入pfx证书内容精选换一换单击“开始”,运行框输入“MMC”,回车。在MMC控制台菜单栏中单击“文件”,选择“添加/删除管理单元”。在“添加或删除管理单元”对话框,选择“可用管理单元”区域的“证书”。单击“添加”添加证书。在“证书管理”对话框,选择“计算机账户”,单击“下一步”。在“选择计算机”对话框,单击“完成”。在“添加或删除管理单元”对话框,单击“确定”。在单击“开始”,运…

    2022年5月1日
    149
  • 软件测试流程五个阶段

    软件测试流程五个阶段软件测试按照研发阶段一般分为5个部分:单元测试、集成测试、确认测试、系统测试、验收测试,下面将不同阶段需要的一些工作内容做一下梳理希望可以帮助到大家。 //No.1//单元测试 单元测试又称为模块测试,是针对软件设计的最小单位程序模块进行正确性检查的测试工作,单元测试需要从程序内部结构出发设计测试用例,多个模块可以平行地独立进行单元测试。一、单元测试的内容: 1、模…

    2022年6月7日
    62
  • mysql源码包安装以及主从搭建

    mysql源码包安装以及主从搭建

    2021年9月3日
    56
  • HTML期末大作业~餐饮文化学生网页设计作业(HTML+CSS+JavaScript)[通俗易懂]

    HTML期末大作业~餐饮文化学生网页设计作业(HTML+CSS+JavaScript)[通俗易懂]HTML期末大作业~基于HTML+CSS+JavaScript饮食网站设计与实现关于HTML期末网页制作,大作业A+水平~饮食网页作业HTML+CSS+JavaScript实现,共有联系我们在线留言资质荣誉行业资讯成功案例新闻资讯产品中心发展历史关于我们8个页面!原始HTML+CSS+JS页面设计,可以学习学习,大学网页设计作业,~这是一个不错的网页制作,画面精明,非常适合初学者学习使用。作品演示1.关于我们2.产品中心3.新闻资讯4.资质荣誉5.在线留言6.

    2025年10月2日
    2
  • 来自程序猿的一些废话

    “又是一年毕业时”,看到一批批学子离开人生的象牙塔,走上各自的工作岗位;想想自己也曾经意气风发、踌躇满志,不觉感叹万千……本文是自己工作6年的经历沉淀或者经验提炼,希望对所有的软件工程师们有所帮助,早

    2021年12月22日
    52
  • 加密芯片硬件协处理器

    加密芯片硬件协处理器通俗来讲,硬件协处理器是CPU内部用于处理特定算法或逻辑运算的硬件电路模块,我们可以把他理解为一个特殊的加速器。硬件协处理器可以用于减轻系统微处理器的特定处理任务负担。例如,数学协处理器可以控制数字处理;图形协处理器可以处理视频绘制。Intelpentium微处理器就包括内置的数学协处理器。一个协处理器通过扩展指令集或提供配置寄存器来扩展内核处理功能。一个或多个协处理器可以通过协处理器接口与CPU内核相连。协处理器可以通过一组专门的、提供的接口的CPU指令来访问。对于加密芯片行业

    2022年6月25日
    31

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号