《程序定时器》课件.pptxVIP

程序定时器制作人：PPT创作创作时间：2024年X月

目录第1章简介

第2章setInterval和setTimeout

第3章requestAnimationFrame

第4章performance.timing

第5章定时器的优化与性能测试

第6章总结

01第1章简介

程序定时器是什么？在特定的时间做某些事情定时任务定时执行同一个任务轮询精确控制任务的执行时间时间控制

常见的程序定时器常用的定时器setInterval和setTimeout用于动画渲染的定时器requestAnimationFrame用于性能监控的定时器performance.timing

setInterval和setTimeout的使用方法setInterval和setTimeout都是用于定时执行任务的方法，具体使用方法可以参考JS文档。setInterval是反复执行任务，而setTimeout是在间隔时间后执行任务，它们都可以通过传入函数和时间来使用。

requestAnimationFrame的使用方法系统会每秒钟运行60帧，requestAnimationFrame正好利用这个特性每秒60帧requestAnimationFrame兼容性好，特别是在移动设备上面兼容性好使用requestAnimationFrame只需要传一个函数即可，省去了setInterval等的繁琐参数设置使用简单

performance.timing的使用方法performance.timing是用于性能监控的定时器，它可以用于分析页面的加载性能。通过使用performance.timingAPI，我们可以得到页面从发送请求到渲染完成的时间各阶段的时间耗时。

定时器的使用注意事项不要随意创建定时器，尤其是短时间重复创建

定时器应尽量避免死循环

要及时清除不再使用的定时器定时器的注意事项定时器的性能和精确度定时器可能会对页面性能造成一定影响

定时器的精确度受到多方面因素影响

02第2章setInterval和setTimeout

setInterval和setTimeout的区别setInterval和setTimeout的使用场景setInterval和setTimeout的区别

setInterval和setTimeout的用法setInterval和setTimeout的参数含义setInterval和setTimeout的基本使用方法

setInterval和setTimeout的高级用法setInterval和setTimeout的性能优化clearInterval和clearTimeout的使用方法

使用setInterval实现Canvas动画使用setInterval实现Canvas动画010302使用setTimeout实现无限滚动列表使用setTimeout实现无限滚动列表

setInterval和setTimeout的区别setInterval和setTimeout都是JavaScript中的计时器，常用于处理周期性任务或延迟执行任务。不同之处在于，setInterval会每隔一段时间调用一次函数，而setTimeout只会执行一次。使用场景也有所不同，setInterval适用于需要周期性执行任务的场景，而setTimeout则适用于延迟执行任务的场景。

setInterval和setTimeout的用法setInterval和setTimeout都接受两个参数，第一个参数是要执行的函数，第二个参数是时间间隔或延迟时间。间隔时间可以是毫秒、秒或分，具体取决于时间参数的单位。

setInterval和setTimeout的高级用法可以使用clearInterval和clearTimeout函数来取消之前设置的计时器。同时，为了减少计时器对页面性能的影响，我们还需要对setInterval和setTimeout进行性能优化，比如使用requestAnimationFrame来代替setInterval实现动画效果。

使用setInterval实现Canvas动画使用setInterval实现Canvas动画0103使用setInterval实现在线游戏使用setInterval实现在线游戏02使用setTimeout实现无限滚动列表使用setTimeout实现无限滚动列表

03第3章requestAnimationFrame