首先，在浏览器的默认实现中，setTimeout和setInterval的时机是不准确的，因为我们知道js是单线程的，如果前面的代码耗时很长，那么就会导致后面的定时器不能按时执行。另外setInterval会带来性能问题，比如执行累积的问题等等。我们可以使用requestAnimationFrame来满足定时器的要求。首先，requestAnimationFrame自带函数节流功能，基本可以保证16.6毫秒内只执行一个requestAnimationFrame。总的来说，在一次重绘或回流中完成，重绘或回流的时间间隔紧跟浏览器的刷新频率。一般来说，这个频率是每秒60帧。2.在隐藏或不可见的元素中，requestAnimationFrame不会重绘或回流，这当然意味着更少的cpu、gpu和内存使用。//setTimeout的实现函数mySetTimeout(callback,timeout){lettimer;让时间=新日期（）；让endTime=超时||0constloop=()=>{timer=window.requestAnimationFrame(loop);if(newDate()-time>=endTime){callback.call(this,timer);window.cancelAnimationFrame（计时器）；}}window.requestAnimationFrame(loop);}mySetTimeout(()=>{console.log('hh')})functionmySetInterval(callback,interval){lettimer;让startTime=newDate();constloop=()=>{timer=window.requestAnimationFrame(loop);if(newDate()-startTime>=interval){callback.call(this,timer);开始时间=新日期();}}timer=window.requestAnimationFrame(loop);returntimer;}vara=1;mySetInterval(timer=>{a++;if(a>=5){window.cancelAnimationFrame(timer);}console.log(a,'1秒一次');},1000)
