阿里前端面试题：requestAnimationFrame实现类似setInterval的计时器

Question

使用requestAnimationFrame实现类似setInterval的计时器

Answer 1

供参考，没有实现字符串功能，反正也不推荐使用。functionsetInterval2(cb,delay,...args){//记录所有正在运行的interval用于撤销letpool=window[Symbol.for('IntervalPool')]if(!pool){pool={}window[Symbol.for('IntervalPool')]=pool}//interval最低10ms，虽然每frame至少得16msdelay=delay>=10?delay:10//intervalidletticket=Date.now()//每次interval开始时间letstartTime=ticketpool[ticket]=trueloop()returnticketfunctionloop(){if(!pool[ticket]){return}constnow=Date.now()if(now-startTime>=delay){startTime=nowcb(...args)}requestAnimationFrame(loop)}}functionclearInterval2(ticket){letpool=window[Symbol.for('IntervalPool')]if(pool&&pool[ticket]){deletepool[ticket]}}

Answer 2

functiona(callback){requestAnimationFrame(function(){//你的代码callback&&callback()a()})}需要注意requestAnimationFrame的浏览器兼容性问题window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(callback){//为了使setTimteout的尽可能的接近每秒60帧的效果window.setTimeout(callback,1000/60);};window.cancelAnimationFrame=window.cancelAnimationFrame||Window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.msCancelAnimationFrame||window.oCancelAnimationFrame||function(id){//为了使setTimteout的尽可能的接近每秒60帧的效果window.clearTimeout(id);}