• 放弃setInterval-说说定时器


    上述事件循环机制的核心是:JS引擎线程和事件触发线程

    但事件上,里面还有一些隐藏细节,譬如调用setTimeout后,是如何等待特定时间后才添加到事件队列中的?

    是JS引擎检测的么?当然不是了。它是由定时器线程控制(因为JS引擎自己都忙不过来,根本无暇分身)

    为什么要单独的定时器线程?因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确,因此很有必要单独开一个线程用来计时。

    什么时候会用到定时器线程?当使用setTimeoutsetInterval,它需要定时器线程计时,计时完成后就会将特定的事件推入事件队列中。

    • 即便是0毫秒后就推入事件队列,但是W3C在HTML标准中规定,规定要求setTimeout中低于4ms的时间间隔算为4ms。(不过也有一说是不同浏览器有不同的最小时间设定)

    • 就算不等待4ms,就算假设0毫秒就推入事件队列,时间也不一定准确。因为只有可执行栈内空了后才会主动读取事件队列。

    那是用setTimeout还是setInterval?

    用setTimeout模拟定期计时和直接用setInterval是有区别的。

    因为每次setTimeout计时到后就会去执行,然后执行完内部代码后,所以这里可能有一段时间后才会继续setTimeout,中间就多了误差(误差多少与代码执行时间有关)

    而setInterval则是每次都精确的隔一段时间推入一个事件(但是,事件的实际执行时间不一定就准确,还有可能是这个事件还没执行完毕,下一个事件就来了)

    而且setInterval有一些比较致命的问题就是:

    • 累计效应(上面提到的),上一个还没执行完。

    就会导致定时器代码连续运行好几次,而之间没有间隔。
    就算正常间隔执行,多个setInterval的代码执行时间可能会比预期小(因为代码执行需要一定时间)

    • 譬如像iOS的webview,或者Safari等浏览器中都有一个特点,在滚动的时候是不执行JS的,如果使用了setInterval,会发现在滚动结束后会执行多次由于滚动不执行JS积攒回调,如果回调执行时间过长,就会非常容器造成卡顿问题和一些不可知的错误(据说setInterval自带优化,不会重复添加回调)

    • 而且把浏览器最小化显示等操作时,setInterval并不是不执行程序,

    它会把setInterval的回调函数放在队列中,等浏览器窗口再次打开时,一瞬间全部执行时

    所以,鉴于这么多但问题,目前一般认为的最佳方案是:用setTimeout模拟setInterval,或者特殊场合直接用requestAnimationFrame

    补充:JS高程中有提到,JS引擎会对setInterval进行优化,如果当前事件队列中有setInterval的回调,不会重复添加。不过,仍然是有很多问题。。。

    最后留一个作业 setInterval 会不会累计,验证他的执行特点。

    到这里咱们这个系列快说完了,还有最后一节,现在不知道大家听了这些后有什么感想,不知道对大家有么有帮助。我自认为啊有些地方说的不够明确和透彻。很多都是把点带出来了,有些细节可能还需要大家继续学习,查一些资料进行深入研究或者关注下重度前端这个号 我自己的号,分享的内容都有文字版的,也包括我日常工作中的一些技术总结和积累。今天太晚了,最后一节我先想想怎么说吧。

    再见,各位。

  • 相关阅读:
    Goland在go mod vendor模式下无法识别某些库
    国际教育游戏实证研究综述:2008年-2012年
    ES6之用let,const和用var来声明变量的区别
    集成spring boot + mysql + docker实战
    js sort方法根据数组中对象的某一个属性值进行排序(实用方法)
    小试牛刀之sort()排序的实现
    Redis字符串(STRING)中BIT相关命令
    koa,express,node 通用方法连接MySQL
    JavaScript预解释是一种毫无节操的机制
    [php]如何做到高并发优化
  • 原文地址:https://www.cnblogs.com/crith/p/9961326.html
Copyright © 2020-2023  润新知