為什么要說它，源于看到的一道面試題：問題是用js實(shí)現(xiàn)一個(gè)無限循環(huán)的動(dòng)畫。
首先想到的是定時(shí)器
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
#e{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
zoom: 1;
}
</style>
</head>
<body>
<div id="e"></div>
<script>
var e = document.getElementById("e");
var flag = true;
var left = 0;
function render() {
if(flag == true){
if(left>=100){
flag = false
}
e.style.left = ` ${left++}px`
}else{
if(left<=0){
flag = true
}
e.style.left = ` ${left--}px`
}
}
setInterval(function(){
render()
},1000/60)
</script>
</body>
</html>
可以說是完美實(shí)現(xiàn)！
至于時(shí)間間隔為什么是1000/60,這是因?yàn)榇蠖鄶?shù)屏幕渲染的時(shí)間間隔是每秒60幀。
既然setInterval可以搞定為啥還要用requestAnimationFrame呢？最直觀的感覺就是，添加api的人是個(gè)大神級牛人，我只能懷疑自己。
所以搜索相關(guān)問題發(fā)現(xiàn)以下兩點(diǎn)
requestAnimationFrame 比起 setTimeout、setInterval的優(yōu)勢主要有兩點(diǎn)：
1、requestAnimationFrame 會(huì)把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，并且重繪或回流的時(shí)間間隔緊緊跟隨瀏覽器的刷新頻率，一般來說，這個(gè)頻率為每秒60幀。
2、在隱藏或不可見的元素中，requestAnimationFrame將不會(huì)進(jìn)行重繪或回流，這當(dāng)然就意味著更少的的cpu，gpu和內(nèi)存使用量。
直接上代碼：
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
#e{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
zoom: 1;
}
</style>
</head>
<body>
<div id="e"></div>
<script>
var e = document.getElementById("e");
var flag = true;
var left = 0;
function render() {
if(flag == true){
if(left>=100){
flag = false
}
e.style.left = ` ${left++}px`
}else{
if(left<=0){
flag = true
}
e.style.left = ` ${left--}px`
}
}
//requestAnimationFrame效果
(function animloop() {
render();
window.requestAnimationFrame(animloop);
})();
</script>
</body>
</html>
我沒有添加各個(gè)瀏覽器的兼容寫法，這里只說用法。
效果是實(shí)現(xiàn)了，不過我想到兩個(gè)問題。
1、怎么停止requestAnimationFrame？是否有類似clearInterval這樣的類似方法？
第一個(gè)問題：答案是確定的 必須有：cancelAnimationFrame()接收一個(gè)參數(shù) requestAnimationFrame默認(rèn)返回一個(gè)id，cancelAnimationFrame只需要傳入這個(gè)id就可以停止了。
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
#e{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
zoom: 1;
}
</style>
</head>
<body>
<div id="e"></div>
<script>
var e = document.getElementById("e");
var flag = true;
var left = 0;
var rafId = null
function render() {
if(flag == true){
if(left>=100){
flag = false
}
e.style.left = ` ${left++}px`
}else{
if(left<=0){
flag = true
}
e.style.left = ` ${left--}px`
}
}
//requestAnimationFrame效果
(function animloop(time) {
console.log(time,Date.now())
render();
rafId = requestAnimationFrame(animloop);
//如果left等于50 停止動(dòng)畫
if(left == 50){
cancelAnimationFrame(rafId)
}
})();
//setInterval效果
// setInterval(function(){
// render()
// },1000/60)
</script>
</body>
</html>
附上一個(gè)效果圖。也可直接capy代碼測試。
2、如果我想動(dòng)畫頻率降低怎么做，為什么不考慮加快呵呵 當(dāng)前刷新頻率已經(jīng)是屏幕的刷新頻率了再快也沒有意義了
這個(gè)略微麻煩點(diǎn)
默認(rèn)情況下，requestAnimationFrame執(zhí)行頻率是1000/60,大概是16ms多執(zhí)一次。
如果我們想每50ms執(zhí)行一次怎么辦呢？
requestAnimationFrame執(zhí)行條件類似遞歸調(diào)用 （說的是類似）別咬我，既然這樣的話我們能否自定一個(gè)時(shí)間間隔再執(zhí)行呢？當(dāng)然定時(shí)器這么low的東西我們就不考慮了，都已經(jīng)拋棄它用rAF了（都快結(jié)束了我才想起寫簡寫太他媽長了），
這個(gè)思路來源于我?guī)啄昵案鉏M的一個(gè)項(xiàng)目，服務(wù)端推送消息為了減小包的大小不給時(shí)間戳，這個(gè)我們做前端的都知道，我們雖然很牛逼 不過用戶更牛逼，萬一改了時(shí)間就不好玩了。
解決方案是 當(dāng)和服務(wù)端通信時(shí) 記錄下一個(gè)時(shí)間差，（時(shí)間差等于服務(wù)端時(shí)間-本地時(shí)間）不管正負(fù)我們只要這個(gè)時(shí)間差。這樣每當(dāng)我們接受到消息 或者發(fā)送消息的時(shí)候我們就拿本地時(shí)間和是價(jià)差相加。這樣就可以保證和服務(wù)端時(shí)間是一致的了，思路是不是很牛逼哈哈。
撤了半天我們通過以上思路來解決下rAF改變間隔的問題
上代碼
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
#e{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
zoom: 1;
}
</style>
</head>
<body>
<div id="e"></div>
<script>
var e = document.getElementById("e");
var flag = true;
var left = 0;
//當(dāng)前執(zhí)行時(shí)間
var nowTime = 0;
//記錄每次動(dòng)畫執(zhí)行結(jié)束的時(shí)間
var lastTime = Date.now();
//我們自己定義的動(dòng)畫時(shí)間差值
var diffTime = 40;
function render() {
if(flag == true){
if(left>=100){
flag = false
}
e.style.left = ` ${left++}px`
}else{
if(left<=0){
flag = true
}
e.style.left = ` ${left--}px`
}
}
//requestAnimationFrame效果
(function animloop() {
//記錄當(dāng)前時(shí)間
nowTime = Date.now()
// 當(dāng)前時(shí)間-上次執(zhí)行時(shí)間如果大于diffTime，那么執(zhí)行動(dòng)畫，并更新上次執(zhí)行時(shí)間
if(nowTime-lastTime > diffTime){
lastTime = nowTime
render();
}
requestAnimationFrame(animloop);
})()
</script>
</body>
</html>
到此結(jié)束了。歡迎吐槽！
