前端 JavaScript 进阶面试题, setTimeout,setInterval,requestAnimationFrame 各有什么特点?
前端 JavaScript 进阶面试题, setTimeout,setInterval,requestAnimationFrame 各有什么特点?
QA
Step 1
Q:: setTimeout 和 setInterval 的区别是什么？
A:: setTimeout 是用于在指定的时间后执行一次代码，而 setInterval 是用于每隔指定的时间重复执行代码。setTimeout 返回的是一个唯一的标识符，可以通过 clearTimeout 来取消这个定时器；setInterval 也返回一个唯一的标识符，可以通过 clearInterval 来取消这个循环。
Step 2
Q:: requestAnimationFrame 与 setTimeout、setInterval 的区别是什么？
A:: requestAnimationFrame 专为动画而设计，浏览器会在下一次重绘前调用回调函数。这种方法能更好地保证动画的流畅性和节能效果，因为它会在屏幕刷新率的节奏下执行，避免了 setTimeout 和 setInterval 可能带来的卡顿问题。
Step 3
Q:: 如何取消 setTimeout 和 setInterval？
A:: 可以通过 clearTimeout 和 clearInterval 来取消。调用时需要传入对应的定时器 ID。例如，const timerId = setTimeout(callback, 1000); clearTimeout(timerId);
Step 4
Q:: requestAnimationFrame 的使用场景是什么？
A:: requestAnimationFrame 主要用于动画效果的实现，比如页面滚动动画、元素的移动和变化等。它能够使动画更加流畅，并且在后台标签页时会自动暂停，从而节省资源。
Step 5
Q:: setTimeout 的最小时间间隔是多少？
A:: 根据 HTML5 规范，setTimeout 的最小时间间隔为 4 毫秒。但是，在一些旧版本的浏览器中，最小时间间隔可能会更大。
Step 6
Q:: setTimeout 和 setInterval 会不会产生阻塞？
A:: setTimeout 和 setInterval 是异步的，不会阻塞主线程。但是，如果回调函数执行时间过长，可能会影响性能，造成页面卡顿。
Step 7
Q:: requestAnimationFrame 的回调函数如何保证高效执行？
A:: 为了保证高效执行，应该尽量减少回调函数中的复杂计算，可以将计算分散到多个帧中执行。同时，避免在回调函数中进行 DOM 操作，这会导致重绘和重排，从而影响性能。