阿里前端面试题：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至少得16ms
delay=delay>=10?delay:10
//intervalid
letticket=Date.now()
//每次interval开始时间
letstartTime=ticket
pool[ticket]=true
loop()
returnticket
functionloop(){
if(!pool[ticket]){return}
constnow=Date.now()
if(now-startTime>=delay){
startTime=now
cb(...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);
}