window.requestAnimationFrame
- 计时器一直是javascript动画的核心技术。
- 大多数电脑显示器的刷新频率是60Hz,大概相当于每秒钟重绘60次。
- 而setTimeout和setInterval的问题是,它们都不精确。
- requestAnimationFrame采用系统时间间隔,保持最佳绘制效率,提高系统性能,改善视觉效果
- requestAnimationFrame是由浏览器专门为动画提供的API,不需要设置时间间隔。
- IE9-浏览器不支持该方法
上代码
1.启动定时器
requestID = requestAnimationFrame(callback);
//控制台输出1和0
var timer = requestAnimationFrame(function(){
console.log(0);
});
console.log(timer);//1
2.cancelAnimationFrame方法用于取消定时器
//控制台什么都不输出
var timer = requestAnimationFrame(function(){
console.log(0);
});
cancelAnimationFrame(timer);
也可以直接使用返回值进行取消
var timer = requestAnimationFrame(function(){
console.log(0);
});
cancelAnimationFrame(1);
3.应用
<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn">run</button>
<script>
var timer;
btn.onclick = function(){
myDiv.style.width = '0';
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
if(parseInt(myDiv.style.width) < 500){
myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%';
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>