资讯专栏INFORMATION COLUMN

三张图理解JS高级定时器

LiveVideoStack / 1436人阅读

摘要:图二解读定时器可以在指定时间把定时器代码加入待执行队列,但并不能保证代码执行时机,待执行队列中的代码要等进程空闲时才能执行。也就是说定时器每隔间隔触发一次,尝试加入队列,拥堵时段将直接忽略本次操作。

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

图一解读:JS运行于单线程的环境中:页面载入时授限制性

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

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

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97570.html

相关文章

  • 《第31天:JQuery - 轮播图》

    摘要:源码下载地址链接提取码写这篇文章,当做是对自已这一天的一个总结写轮播图要准备的东西三张尺寸大小一样的图片分为三个模块模块,模块,模块模块轮播图引用本地固定的库引入你写的文件引入你写的文件为你本地的图片路径,为你图片的宽度,为类名左滑右滑 showImg(https://segmentfault.com/img/bVbi0YG?w=1408&h=363); 源码下载地址:链接:https...

    fuyi501 评论0 收藏0
  • 《第31天:JQuery - 轮播图》

    摘要:源码下载地址链接提取码写这篇文章,当做是对自已这一天的一个总结写轮播图要准备的东西三张尺寸大小一样的图片分为三个模块模块,模块,模块模块轮播图引用本地固定的库引入你写的文件引入你写的文件为你本地的图片路径,为你图片的宽度,为类名左滑右滑 showImg(https://segmentfault.com/img/bVbi0YG?w=1408&h=363); 源码下载地址:链接:https...

    RiverLi 评论0 收藏0
  • 授人以渔式解析原生JS写轮播图

    摘要:鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来,鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器,绑定事件,重构下代码封装出往右往左轮播函数和自动轮播函数。 需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来,...

    Zack 评论0 收藏0
  • 授人以渔式解析原生JS写轮播图

    摘要:鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来,鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器,绑定事件,重构下代码封装出往右往左轮播函数和自动轮播函数。 需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来,...

    SKYZACK 评论0 收藏0
  • 授人以渔式解析原生JS写轮播图

    摘要:鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来,鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器,绑定事件,重构下代码封装出往右往左轮播函数和自动轮播函数。 需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来,...

    Pink 评论0 收藏0

发表评论

0条评论

LiveVideoStack

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<