解读javascript的计时器 I
作者:互联网
2009-08-17
说明:这篇文章节选自 的《Secrets of the JavaScript Ninja》一书,本人翻译只是供大家学习,翻译不足之处,请斧正。
这篇文章主要从下面几个方面解读计时器:
- 计时器概述;
- 计时器速度深度探析;
- 用计时器处理大量任务;
- 利用计时器管理动画;
- 较好的计时器测试
计时器是一个我们了解很少且经常被滥用的东西,它是javascript的特色。实际上,在复杂的应用程序开发中,它能为我们提供很多帮助。计时器提供了一个可以将代码片段异步延时执行的能力,javascript生来是单线程的(在一定时间范围内仅一部分js代码能运行),计时器为我们提供了一种避开这种限制的方法,从而开辟了另一条执行代码的蹊径。
有趣的是,与我们普遍接受的观点相反,计时器并不是javascript语言的一部分,而是浏览器引入的方法和对象的一部分。这意味着如果你选择在一个非浏览器的环境运行它,很有可能计时器不存在,你必须使用特定功能推行你自己的版本(如Rhino线程)。
1、计时器是如何工作的
从根本上来说,理解计时器如何工作很重要。通常情况下,计时器的行为并不直观,因为它在一个单独的线程中,让我们从三个函数的测试开始,对于每一个函数我们都有机会构建和控制计时器。
- var id = setTimeout(fn,delay);启动一个计时器,它将在延迟时间之后调用特定的函数,该函数返回一个唯一的ID,利用这个ID计时器在稍后的时间里被取消;
- var id = setInterval(fn,delay);与setTimeout相似,但它不断的调用函数(每隔一定延迟时间)直到它被取消;
- clearInterval(id),clearTimeout(id);接受计时器的 ID(由上述任意一个函数返回)并停止调用计时器。
为了理解计时器内部是如何工作的,有一个很重要的概念需要加以探讨:延迟是无法保证的。既然浏览器中所有javascript 是在一个单线程中运行的,那么异步事件(如鼠标点击、计时器)在执行中也只有存在开放状态时才运行,下面这张土很好的说明了这个问题:

这张图有很多信息需要消化,充分理解它将使你对异步js执行有一个更好的认识,图表是一维的,在垂直方向上是时间(挂钟),以毫秒为单位。蓝色盒子代表代表js执行的比例。例如,第一个javascript块运行时间大约为18秒,鼠标点击大约为11秒等等。
相关标签:
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
「性能优化」虚拟列表极致优化实战:从原理到源码,打造丝滑滚动体验
你的 Vue 3 生命周期,VuReact 会编译成什么样的 React?
你的 Vue 3 defineProps(),VuReact 会编译成什么样的 React?
Vue条件渲染详解:v-if、v-show用法与实战指南
前端性能内卷终点?Signals 正在重塑我们的开发习惯
使用 IntersectionObserver + 哨兵元素实现长列表懒加载
大屏卡成 PPT?这 3 个性能优化招数亲测有效
别再用 JSON.parse 深拷贝了,聊聊 StructuredClone
当 Vue 3 遇上桥接模式:手把手教你优雅剥离虚拟滚动的业务大泥球
VueUse 全面指南|Vue3组合式工具集实战
AI精选
柔美魅力内衣时尚人像摄影
Billie Eilish 卡通版 3D 渲染提示词
从程序员到AI工程师:距离有多远?附全套学习路线图
ArkClaw 养虾省钱攻略,这 10% 的返利你还不知道?
大模型就是你雇的员工:从职场管理学看 AI 协作范式的三次进化
MinerU JS/TS SDK 深度指南:JavaScript/TypeScript 开发者的 PDF/文档解析利器
AI 自动值夜班时代来了!Claude Code 刚刚推出 Routines
一天一个开源项目(第74篇):OpenCLI - 把任意网站变成零成本 CLI 工具的 AI Agent 基础设施
