浏览器原理：6.2 setTimeout

最新推荐文章于 2024-04-19 12:14:11 发布
最新推荐文章于 2024-04-19 12:14:11 发布
阅读量4.3k 收藏
点赞数
文章标签： 网络 安全 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51005544/article/details/123319056
版权

setTimeout

setTimeout 是浏览器提供的一个方法，可以用它来设置一个定时器，定时器到期之后会执行放在里面的函数。了解一个方法，最直接的方式就是看源码，这里从浏览器是怎样来实现 setTimeout 的角度来了解。

浏览器怎样实现 setTimeout

浏览器是根据消息队列和事件循环两大机制来控制各个线程之间的协调工作的。 主线程不断从事件循环中取出任务，执行任务，其他线程触发的任务按消息队列的数据结构来排进事件循环中。

setTimeout，说白了就是要让JS引擎执行一段异步代码的任务，并且还要限定其时间。很显然消息队列的数据结构无法满足限定时间这个需求，所以需要再开一个队列。Chrome除了维护一个消息队列之外，还维护了一个延迟队列，这个队列主要用来维护一些需要延迟执行的任务，所以当JS调用setTimeout的时候，里面的回调函数会被放在该队列中。消息队列和延迟队列是处于同级关系，但消息队列在前，即每次当主线程从消息队列之中取出一个任务执行完成后，便会考虑从延迟队列中取出一个任务，如果满足条件则取出，不满足则跳过。

setTimeout的注意事项

  • 如果当前任务执行时间过久，会耽误到延迟队列中的任务的执行时间
    比如说，在当前代码中，有一个for循环从1加到100000000，而在for循环前面又开启了一个定时器，是立刻执行，但是执行完之后可以发现，定时器中的回调函数过了很久才会执行
  • 如果 setTimeout 存在嵌套，浏览器会自动设置最短时间间隔为4ms
  • 未激活的页面，setTimeout执行最小间隔时间是 1000 ms
    这么做的目的是为了优化后台页面的加载损耗以及降低耗电量
  • 延迟执行时间有最大值
    因为浏览器是以 32 bit 存储延时值，所以最大数字为 2的32次方-1，即最大延迟时间为这么多毫秒
  • 使用 setTimeout 设置的回调函数中的 this 不符合直觉
    所以最好用箭头函数来设置setTimeout的回调函数
xiaofu_hu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
setTimeout 浏览器进入后台时不被冷却的方法
352328759的博客
01-19 3498
出于节能的考虑, 部分浏览器在进入后台时(或者失去焦点时), 会将 setTimeout 等定时任务暂停 待用户回到浏览器时, 才会重新激活定时任务 说是暂停, 其实应该说是延迟, 1s 的任务延迟到 2s, 2s 的延迟到 5s, 实际情况因浏览器而异 在 Chrome 中运行一下代码 var t = new Date() * 1 function fun1() { var _t = new Date() * 1 console.log(_t - t) t = _t setTimeout(fun
chrome_extension_timeout:Chrome扩展程序可在工作期间保持高效
04-10
关于 Chrome扩展程序，可在工作期间保持高效率。 它会在您的时间轴中阻止您的网站。
delay:setTimeout的Promise API
05-16
延迟 setTimeout API。 它具有与模块相同的功能，但全部以打字稿编写。 安装 $ yarn add delay.ts 用法 import delay , { delayReject , delayThen , delayCatch } from 'delay.ts' ; delay ( 3 * 1000 , 'some value' ) . then ( v => { // Executed in 3 seconds console . log ( v ) ; } ) ; delayReject ( 2 * 1000 , 'some error' ) . catch ( e => { // Executed in 2 seconds console . error ( e ) ; } ) ; Promise . resolve ( 'some
浏览器页面进入后台后setTimeout不正确执行的解决方法
最新发布
L435204的博客
04-19 574
出于节能的考虑，一些浏览器（比如Chrome浏览器）会在页面进入后台等不活跃的状态时，延缓甚至暂停setTimeout等定时器的执行。在这个节能策略影响到前端页面的功能时，就需要想办法绕过此限制。本人翻阅了很多网络文章，发现使用web worker是一种比较合适的解决方案。经研究理解web worker的使用方法、结合前人经验、搭配自己的调试和优化，本人编写了一段仅实现上述功能，且简洁易于理解的代码。
settimeout在各个浏览器的最小时间
cxz
05-14 1540
由一张图引出，可以看到下面在不同浏览器输出结果不相同，并且按照最小time为4ms，解释不通 看上图我们会发现，对于 setTimeout 设置延迟 0ms 和 1ms，各大浏览器厂商采取了两种策略。 首先会在 延迟时间 和 1ms 之间取一个最大值。换句话说，在不满足嵌套层级的情况下，最小延迟时间设置为 1ms。这也解释了为什么在 chrome 中测试 setTimeout 是上面的结果。 总结： 如果设置的 timeout 小于 0，则设置为 0 如果嵌套的层级超过了 5 层，并且 timeout
setTimeout函数兼容各浏览器运行执行效果
he91-com
06-11 537
目前这个setTimeout可以很好地兼容IE6，7,8,9以及谷歌浏览器Chrome，火狐浏览器FireFox,苹果浏览器Safari,Opera。 setTimeout是一个很不错的函数，网站页面前端工程师经常将其用于几秒后执行的动作。setTimeout这个JS内置函数其用法也很简单，下面是setTimeout()的函数说明以及用法详解和实例、示例代码： setTimeout()的作用是...
浏览器工作原理(16) - setTimeout实现原理
ES6之super关键字详解
09-05 673
上一篇文章讲了消息队列和事件循环的有关知识，同时引出了微任务和宏任务的概念，这篇文章继续往下面说，这次来一起看看setTimeout这个函数 相信各位在平时开发的过程中，经常会用到这个setTimeout函数，并且觉得也不是很难，就是一个定时器，用来指定在多少毫秒之后执行某个函数，返回的是一个编号，代表这个setTimeout定时器，编号的作用是用来清除该定时器的时候用，基本用法如下代码： function showName(){ console.log("小明") } var timerID = .
reissue:具有setTimeout语义的setInterval
05-12
具有setTimeout语义的setInterval 通常，您希望以特定的时间间隔执行操作，以等待操作完成。 对于异步操作， setInterval()对于这种情况是不够的，因为即使第一个仍在运行中，它也可以第二次执行该操作。 像刷新...
setTimeout和setInterval的浏览器兼容性分析
10-31
setTimeout和setInterval的浏览器兼容性分析
写一个JavaScript框架：比setTimeout更棒的定时执行
01-29
在这一章里，我打算讲一下在浏览器里的异步代码不同执行方式。你将了解定时器和事件循环之间的不同差异，比如 setTimeout和Promises。 这个系列是关于一个开源的客户端框架，叫做NX。在这个系列里，我主要解释一下写...
javascript定时器工作原理
tonyXf121的专栏
08-13 3641
原文地址：http://ejohn.org/blog/how-javascript-timers-work/ 在基础知识层面上，了解javascript定时器的工作原理是很重要的。由于javascript是工作在一个单线程环境中，所以它们经常表现出一些违反直觉的行为。下面我们就从创建和操作三个定时器入手来分析定时器的工作原理。 var id=setTimeout(fn,delay); 初始
火狐浏览器下JS代码不兼容setTimeout函数失效无效不运行执行的解决办法
weixin_34018169的博客
11-14 491
今天检查自己用JQuery+AJAX+PHP做的网站后台登录检测，发现登陆成功后执行页面跳转函数这段JavaScript（JS）代码特效在IE和谷歌浏览器Chrome下都可以很好地执行，兼容性还不错。结果到了火狐（FireFox）浏览器下setTimeout这个JS内置函数不执行了，无效了，也没报错！打开FireBUG指望它能检测出JS的错误，结果没用...Javascript(JS)脚本代码在各...
JavaScript 定时器工作原理
abcd201405的博客
07-27 89
定时器设定的延迟时间是没有保证的。因为所有在浏览器中执行的JavaScript单线程异步事件（比如鼠标点击事件和计时器）都只有在它有空的时候才会被执行。 setTimeout 会在每次回调函数执行之后至少需要延时10ms再去执行一次（可能是更多，但是不会少）。但是setInterval会每隔10ms就去尝试执行一次回调函数，不管上一个回调函数是不是还在执行。 javascript...
浏览器中的页面循环系统（二）Webapi：setTimeout是怎么实现的
weixin_44828588的博客
08-23 467
首先，为了支持定时器的实现，浏览器增加了延时队列。其次，由于消息队列排队和一些系统级别的限制，通过 setTimeout 设置的回调任务并非总是可以实时地被执行，这样就不能满足一些实时性要求较高的需求了。最后，在定时器使用过程中，还存在一些陷阱，需要你多加注意。通过分析和讲解，你会发现函数 setTimeout 在时效性上面有很多先天的不足，所以对于一些时间精度要求比较高的需求，应该有针对性地采取一些其他的方案。
从 setTimeout 到浏览器和 JS 引擎的运行机制
羽墨灵丘的博客
04-26 413
在学习setTimeout的过程中深入学习浏览器和js引擎的运行机制
JS - 关于setTimeout我所不知道的
Xxxxxl17的博客
02-26 333
js高级程序设计第四版电子版的一段代码，让我一度以为是错别字… MDN: window.setTimeout – 情况①②③ var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]); var timeoutID = scope.setTimeout(function[, delay]); var timeoutID = scope.setTimeout(code[, delay]); 其实人家压根没有错，还是我太肤浅啦。
Chrome开发者工具调试小技巧
qq_43474419的博客
02-03 2177
Chrome的开发者工具有很多实用的调试功能，不知道大家有没有用到过，在这里分享几个，后续再发现更多有趣的小技巧会继续更新。
使用Chrome断点调试javascript程序
小方块的世界
10-15 303
1. 问题描述： 代码上线后出现问题，有一个提交按钮无法点击，原因是在提交方法中多了一条 return false 语句。 那么如何通过Chrome中的控制台在source中设置断点调试实现该功能呢？ submit: function() { let _this = this return false // 注意这句是测试时使用的，不小心打到了生产上 let data = Object.assgin({}, _this.searchData) $reques
Chrome---network模块---Timing
lgq2016的博客
08-24 943
对于动态网页来说，服务器收到用户打开一个页面的请求时，首先要从数据库中读取该页面需要的数据，然后把这些数据传入到模板中，模板渲染后，再返回给用户。比如使用了低带宽的服务器，或者本来用的是电信的服务器，可联通的网络用户要来访问你的服务器，这样也会拖慢网速。发送请求头时带上了多余的用户信息。这里需要额外说明的是，如果你使用了代理服务器，还会增加一个 Proxy Negotiation 阶段，也就是代理协商阶段，它表示代理服务器连接协商所用的时间，不过在上图中没有体现出来，因为这里我们没有使用代理服务器。
angular创建项目报错:setTimeout is not defined
09-09
关于 "setTimeout is not defined" 的错误，这通常是由于在 Angular 项目中未正确导入或使用定时器函数造成的。 请确保你在使用 `setTimeout` 函数之前正确导入它。在 Angular 中，你可以通过在组件的顶部添加以下导入语句来导入 `setTimeout` 函数： ```typescript import { setTimeout } from 'timers'; ``` 另外，你还可以尝试使用全局作用域下的 `window` 对象来访问 `setTimeout` 函数，而不需要导入它。例如： ```typescript window.setTimeout(() => { // 在此处执行你的代码 }, delay); ``` 请确保 `delay` 是一个有效的数字，代表延迟的毫秒数。 如果问题依然存在，请提供更多的代码细节和上下文，以便我能够更好地帮助你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值