当前位置: 首页 > news >正文

js中的定时器 setTimeout()和setInterval()

JavaScript 定时器,有时也称为“计时器”,用来在经过指定的时间后执行某些任务,类似于我们生活中的闹钟。

在 JavaScript 中,我们可以利用定时器来延迟执行某些代码,或者以固定的时间间隔重复执行某些代码。例如,您可以使用定时器定时更新页面中的广告或者显示一个实时的时钟等。

JavaScript 中提供了两种方式来设置定时器,分别是 setTimeout() setInterval(),它们之间的区别如下:

方法作用
setTimeout()在指定的时间后(单位为毫秒),执行某些代码,代码只会执行一次
setInterval()按照指定的周期(单位为毫秒)来重复执行某些代码,定时器不会自动停止,除非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口

具体介绍如下:

setTimeout()

常用语法:

// 单次定时器,只能执行一次
setTimeout(function () { },time);// - 参数1:function 必需。函数,过time时间之后执行的业务逻辑,可写成箭头函数()=>{}的形式// - 参数2:time 可选。执行或调用 function 需要等待的时间,以毫秒ms计。默认为 0// 清除setTimeout单次定时器
clearTimeout(定时器名称);

注意事项:time 取默认值 0 时意味着“马上”执行,或者尽快执行。不管是哪种情况,实际的延迟时间可能会比期待的 (time 毫秒数) 值长。

实际延时比设定值更久的原因:最小延迟时间

在浏览器中,setTimeout()/setInterval()的每调用一次定时器的最小间隔4ms,这通常是由于函数嵌套导致(嵌套层级达到一定深度5层),或者是由于已经执行的 setInterval 的回调函数阻塞导致的,不同浏览器中出现这种最小延迟的情况有所不同

setInterval()

常用语法:

// 循环定时器,不停歇,每过一段时间time,执行一次。setInterval(function () { },time);
// 参数同setTimeout// 清除setInterval循环定时器
clearInterval(定时器名称);

setTimeout() 和 setInterval()中的调用函数我们也称为回调函数 callback 普通函数是按照代码顺序直接调用。 而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。

延迟限制:定时器是可以嵌套的;这意味着,setInterval()的回调中可以嵌入对 setInterval() 的调用以创建另一个定时器,即使第一个定时器还在运行。为了减轻这对性能产生的潜在影响,一旦定时器嵌套超过 5 层深度,浏览器将自动强制设置定时器的最小时间间隔为 4 毫秒。如果尝试将深层嵌套中调用 setInterval()的延迟设定为小于 4 毫秒的值,其将被固定为 4 毫秒。

http://www.lryc.cn/news/24312.html

相关文章:

  • 【吃透Js】深入学习浅拷贝和深拷贝
  • AUTOSAR为啥要开发新的社区商业模式?
  • 数据结构和算法面试常见题必考以及前端面试题
  • 一文解决Python所有报错
  • LeetCode 1237. Find Positive Integer Solution for a Given Equation【双指针,二分,交互】
  • 【C语言】结构体进阶
  • 全志T3+FPGA国产核心板——Pango Design Suite的FPGA程序加载固化
  • 深度学习之 imgaug (图像增强)学习笔记
  • mysql字符串等值查询中条件字段值末尾有空格也能查到数据问题
  • 一个关于事件溯源Event Sourcing的小荔枝,Golang实现
  • Vue3 组合式函数,实现minxins
  • 什么是钉钉消息推送?
  • 利用 NVIDIATAO 和 WeightBias 加速AI开发
  • token - 令牌
  • 应用模型开发指南上新介绍
  • Dbeaver连接Hive数据库操作指导
  • 【RabbitMQ笔记09】消息队列RabbitMQ之常见方法的使用
  • Linux字符设备驱动模型之设备号
  • C++多态原理
  • PMP认证与NPDP认证哪个含金量高?
  • 改进YOLOv7-Tiny系列:首发改进结合BiFPN结构的特征融合网络,网络融合更多有效特征,高效涨点
  • PPC Insights系列:洞见安全多方图联邦
  • SQLite注入记录(目前最全、核心函数用法、布尔盲注、时间盲注、webshell、动态库,绕过方式)
  • Java简单的生成/解析二维码(zxing qrcode)
  • 若依项目导出后端响应的Excel文件流处理
  • 华为OD机试【独家】提供C语言题解 - 数组排序
  • JVM详解——内存结构
  • Jvisualvm监控Tomcat以及相关参数优化
  • 界面组件DevExpress WinForms v22.2 - 全面升级数据展示功能
  • 正点原子第一期