三张图理解JS高级定时器

本文深入探讨了JS定时器的工作原理,包括定时器如何在单线程环境中运作,setInterval与setTimeout的区别,以及如何利用定时器优化JS性能,如数组分块、函数节流和防抖等技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

图片出自JS高程(第三版)

clipboard.png

图一解读:JS运行于单线程的环境中:页面载入时授限制性<script>元素中的代码;之后JS进程将等待更多代码执行;当进程空闲时,下一个代码会被触发并立刻执行。

当有大量JS逻辑代码待处理时,JS进程就会拥堵(因为要在同一个进程中,按顺序挨个执行),表现上就是网页卡死。

clipboard.png

图二解读:定时器可以在指定时间把定时器代码加入待执行队列,但并不能保证代码执行时机,待执行队列中的代码要等JS进程空闲时才能执行。

clipboard.png

图三解读:setInterval每隔delay间隔尝试创建定时器代码实例并加入待执行队列,但为了避免定时器代码连续运行好几次,若当前待执行队列中已有定时器代码实例,将不会创建新的定时器代码实例加入待执行队列。

也就是说setInterval定时器每隔delay间隔触发一次,尝试加入队列,JS拥堵时段将直接忽略本次操作。

这可以保证setInterval定时器推入队列的间隔一定不小于delay间隔,但不能保证其执行间隔。可以采用链式setTimeout可以保证其执行间隔。

综:以上是对定时器的个人理解,对此的重要应用有几点——数组分块、函数节流和防抖等。主要是针对JS特性,通过设计实现方式来优化其性能问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值