html5 frame替代方案 JavaScript定时器setTimeoutsetIntervalrequestAnimationFrame_requestAnimationFrame()

[[]]

本节课将介绍三个和时间有关的操作，分别是定时器、以及它和e，这三个操作都是浏览器对象的功能，以前只支持定时器和它，e是新增的一个功能，能够更有效地支持动画和WebGL动画等应用。

倒计时()

定时周期执行()

时间延迟现象

在fun函数中添加一段for循环代码，将i的检测条件设定为一个数值很大的值，重新加载网页，你可以看到网页上添加了文字，输出内容为定时器

")的运行节奏会放缓，200毫秒内无法精确完成，这种情况很常见，任何任务的运行都需要耗费时段，倘若for循环占用的时长有限，就不会妨碍()对函数fun()的调用，在运用()和()手段时，务必关注时间因素。

取消定时器

方法

作用

()

取消()设置的定时器

()

取消()设置的定时器

运用定时器功能时，需借助编程实现定时器的启动或终止，例如若需在限定时段内反复运行某程序代码，单纯调用特定函数尚显不足，当时间界限过后，还需调用另一函数来终止定时任务。

e()

程序启动时完成代码的初始设置，随后会调用fun函数，接着便进入fun函数内部，按照顺序实施其中的指令，输出"定时器"

");会在页面插入代码“定时器"+"

”，显示“定时器”三个字并换行。当运行到e(fun);这一行代码时，它的功能是向浏览器发起一个请求，并提示稍后调用fun函数，因为fun函数的后续代码S++;尚未执行，必须先完成S++;之后才能执行fun函数，在执行完S++;之后，没有其他程序会占用浏览器的资源，这时浏览器会响应e(fun);的请求并再次执行fun函数，但需要注意，如果系统负载较低，假设每个程序占用1毫秒的执行时间，浏览器不会每间隔1毫秒就响应e(fun);的请求，而是会适当延迟，默认情况下是每秒调用60次，大约16.7毫秒的执行周期，如果显示的是动画效果，也就是60FPS，实际上工程中可能无法达到60FPS，因为实际程序通常比fun函数复杂得多，往往需要占用更多时间，比如25毫秒，这意味着动画的刷新效果会是40FPS。

或许你会疑问e函数为何将最大运行速率设定为每秒六十次，而非更高数值，原因其实非常明了，譬如动画以每秒六十帧的速度进行刷新已经足够满足人的视觉感受，无需进一步提升，否则反而会无谓消耗宝贵的浏览器与电脑资源。

e()调用延迟

能够重新启动浏览器，检测此处代码的运行速率，并与先前的程序进行参照比较。

e()时间不稳定解决办法

了解前述代码后可知，e()发出请求后，浏览器回应所需时间无法预知，实际应用中无需固定周期性调用函数，只要刷新速率达到每秒三十帧以上即可，换言之，e()调用函数的耗时通常介于十六点七毫秒至三十三点三毫秒，具体时长不定，若需制作动画，为确保函数执行速率平稳，就必须明确两次调用fun函数的时间间隔

借助系统自带的日期对象来记录各个时间点，接着就能算出函数fun被调用两次之间的时间间隔，这个时间差可以当作参数输入公式进行运算。不过可能有人会问，在执行t等于T1减去T0这条指令时，本身也需要耗费时间，这样一来t的测量结果真的准确吗？事实上世间万物均非绝对无误，皆为相对存在，通常个人电脑中央处理器处理一条指令需要数纳秒，纳秒与毫秒之间存在百万倍数量级差距，这完全不会对游戏及网络应用的表现造成任何影响。制作单片机电子钟软件时，若对精确度无特殊标准，可选用C语言编程，倘若追求更佳准确度，则应采用汇编语言，通过测算每条指令的执行周期，以此减小偏差。

一般性前端开发人员，其实无需钻研这些底层硬件层面的内容，之所以阐述这些，是因为有些读者具备底层硬件方面的知识储备，并且渴望掌握相关知识，实际上随着时间发展，浏览器也有望成为工业控制领域上位机的平台，编程语言也可能加入嵌入式系统开发的范畴。我起初接触HTML5，并非为了从机械行业转向互联网，而是因为机械、自动化、CAD等领域能通过浏览器和互联网更高效地开展工作。例如，用于3D打印的分层处理程序能够在个人电脑应用程序中执行，HTML5具备对WebGL的兼容性，常规的分层处理程序亦能在网络页面中执行，3D制造装置能够接入网络，从云端获取3D打印的指令信息，就连不联网的机械加工行业中的器械，也可以借助网页实现远程操控，这主要取决于未来的发展进程。也许某个时刻，负责网页开发的程序员可能被指派去设计机床的在线操作面板，那些原本学习机械或电子但后来转向网页制作的工程师，也许会不经意间变成掌握多种技能的多面手，原本被视为跨界短板的特点，反而可能转化为独特的竞争力。

()

这种技术能够移除e()对某个特定函数的影响，比如fun()，只需将函数名称作为参数传递给该技术，采用(fun)的书写方式即可