代码编织梦想

    setTimeout就是一个定时器,用来指定某个函数在多少毫秒之后执行。它会返回一个整数,表示定时器的编号,同时你还可以通过该编号来取消这个定时器。
    要执行一段异步任务,需要先将任务添加到消息队列中。不过通过定时器设置回调函数有点特别,它们需要在指定的时间间隔内被调用,但消息队列中的任务是按照顺序执行的,所以为了保证回调函数能在指定时间内执行,你不能将定时器的回调函数直接添加到消息队列中。
    在 Chrome 中除了正常使用的消息队列之外,还有另外一个消息队列(定时器线程上的消息队列吧),这个队列中维护了需要延迟执行的任务列表,包括了定时器和 Chromium 内部一些需要延迟执行的任务。所以当通过 JavaScript 创建一个定时器时,渲染进程会将该定时器的回调任务添加到延迟队列中。
    延迟队列也是宏任务,实际上blink维护了很多不同优先级的队列,这些队列里面都是宏任务。微任务是在宏任务执行过程中的某个时间点执行的,通常是在宏任务快要结束的时候执行。
    延迟队列会根据发起时间和延迟时间计算出到期的任务,然后依次执行这些到期的任务。等到期的任务执行完成之后,再继续下一个循环过程。通过这样的方式,一个完整的定时器就实现了。
    当一个定时器的任务还没有被执行的时候,也是可以取消的,具体方法是调用 clearTimeout 函数,并传入需要取消的定时器的 ID。浏览器内部实现取消定时器的操作就是直接从延迟队列中,通过 ID 查找到对应的任务,然后再将其从队列中删除掉就可以了。

使用 setTimeout 的一些注意事项

  1. 如果当前任务执行时间过久,会影响定时器任务的执行
  2. 如果 setTimeout 存在嵌套调用,那么系统会设置最短时间间隔为 4 毫秒
        嵌套调用超过五次以上,后面每次的调用最小时间间隔是 4 毫秒。之所以出现这样的情况,是因为在 Chrome 中,定时器被嵌套调用 5 次以上,系统会判断该函数方法被阻塞了,如果定时器的调用时间间隔小于 4 毫秒,那么浏览器会将每次调用的时间间隔设置为 4 毫秒。
  3. 未激活的页面,setTimeout 执行最小间隔是 1000 毫秒
  4. 延时执行时间有最大值
        Chrome、Safari、Firefox 都是以 32 个 bit 来存储延时值的,32bit 最大只能存放的数字是 2147483647 毫秒,这就意味着,如果 setTimeout 设置的延迟值大于 2147483647 毫秒(大约 24.8 天)时就会溢出,那么相当于延时值被设置为 0
  5. 使用 setTimeout 设置的回调函数中的 this 不符合直觉
        在编译的时候,执行上下文中的 this 会被设置为全局 window,如果是严格模式,会被设置为 undefined

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/lovermeiy/article/details/111052539

uniapp使用uCharts区域图-爱代码爱编程

ucharts区域图的使用 一、引入uCharts插件二、定义html模板和样式三、定义变量及宽高度四、调用接口获取数据五、ucharts图表数据渲染显示六、个人感悟 一、引入uCharts插件 import uCharts from '@/echarts_sdk/u-charts/u-charts/u-charts.js'; 如果还未下

Echarts地图 绘制自定义区域 - geojson.io使用方法-爱代码爱编程

Echarts地图 绘制自定义区域 & 解决区域点击无效 1. 绘制地图自定义区域 需求:绘制带高新区的河源市地图,目前百度地图json还没有此新区。需手动绘制。STEP1:获取市区json文件—输入市区后选择下面JSON API(包含子区域)的下载 STEP2:geojson中左上角打开step1下载的文件,点下图按钮绘制新区区域,右侧富文

事件高级-爱代码爱编程

注册事件(2种方式) 给元素添加事件,称为:注册事件 或者 绑定事件 注册方式有两种方式: 传统方式 和 监听注册方式事件监听 addEventListener()事件监听(IE9以后支持) eventTarget.addEventListener(type, listener, [useCapture])方法将指定的监听器注册到 eventTarget(

egg项目开发前的一些步骤-爱代码爱编程

1.封装api返回格式扩展 当我们对前端的请求返回的格式的时候,经过一个统一的格式返回,会比较省时省力。我们在app的目录下创建extend的目录。然后书写我们的context.js,这样我们的ctx对象就会被我们再次的封装。 // app/extend/context.js module.exports = { // 成功提示 api

前端工程师必备的实用网站大全:配色、插件、框架等七大类-爱代码爱编程

一、配色类网站: Color Hunt:http://colorhunt.co 这个网站给我们提供了很多的配色方案,我们直接使用就OK了。使用方法也很简单,鼠标移动到对应的颜色上,我们就可以看到颜色的十六进制码,复制这个颜色到工具里就可以使用了。 Fresh Backgroud Gradients:https://webgradients.com

怎么实现XMLHttpRequest-爱代码爱编程

    消息队列和主线程循环机制保证了页面有条不紊地运行。     异步回调是指回调函数在主函数之外执行,一般有两种方式:     第一种是把异步函数做成一个任务,添加到信息队列尾部;     第二种是把异步函数添加到微任务队列中,这样就可以在当前任务的末尾处执行微任务了。 XMLHttpRequest 运作机制 function GetWebDa

2013上半年,Google Chrome正式版最新版本,又增加什么小功能!-爱代码爱编程

目录 2013年1月23日 Google Chrome正式版最新版本为 V24.0.1312.56 ,新增内容:   2013年2月8日 Google Chrome正式版稳定版为 V24.0.1312.57,测试版Beta:25.0.1364.58 2013年02月22日 Chrome 浏览器 25.0.1364.97 2013年3月27日

Centos7安 装python3+Selenium+chrome+chromedriver-爱代码爱编程

查看当前python版本[root@iZwz99sau950q2nhb3pn0aZ ~]# python Python 2.7.5 (default, Aug 7 2019, 00:51:29) [GCC 4.8.5 20150623 (Red Hat 4.8.5-39)] on linux2 Type “help”, “copyright”, “cred

Github进不去(已解决)hosts 文件修改不了(已解决)网址为 https___github.com_ 的网页可能暂时无法连接,或者它已永久性地移动到了新网址。-爱代码爱编程

最近登录Github上不去,找了很多解决方案终于找到了! 我把chrome的这个插件关闭就又可以进入了(如果不行的话,把其他插件也关了试试) 如果关闭插件解决不了的话可以试试如下方法 进入这个网站,找到ip地址,记住他 https://fastly.net.ipaddress.com/github.global.ssl.fastly.net

怎么实现XMLHttpRequest-爱代码爱编程

    消息队列和主线程循环机制保证了页面有条不紊地运行。     异步回调是指回调函数在主函数之外执行,一般有两种方式:     第一种是把异步函数做成一个任务,添加到信息队列尾部;     第二种是把异步函数添加到微任务队列中,这样就可以在当前任务的末尾处执行微任务了。 XMLHttpRequest 运作机制 function GetWebDa

给浏览器升个级,5款必备浏览器插件推荐-爱代码爱编程

今天带来5款正经的浏览器必备插件吧,有了他们提升浏览器使用体验提高操作效率将不在话下! PS:这几款插件适应于基于Chromium内核的浏览器,如:Chrom、Edge、360极速、搜狗等。 目录 1.AdGuard 广告过滤 2.CrxMouse 鼠标手势 3.OneTab 标签页合并 4.SuperCopy 解除复制限制 5.搜图助手

2013年下半年,Google Chrome正式版最新版本,又增加了什么小功能!-爱代码爱编程

目录 2013年7月10日         Chrome 28新版特性: 2013年8月20日         Chrome 29正式版(Chrome 29.0.1547.57)发布: 2013年10月16日         Chrome 30正式版(30.0.1599.101)发布: 2013年12月5日          正式版(3