优点:
-
requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
-
在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使用量
-
requestAnimationFrame是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态(不观测页面时不运行)下的话,动画会自动暂停,有效节省了CPU开销
总而言之,性能好,稳定。
/**
*
* 函数动画循环,根据浏览器帧循环
* @param {*} func util.requestAnimFrame 开始
* @param {*} wait util.cancelAnimFrame 取消
*/
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
}
})();
window.cancelAnimFrame = (function(){
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
function(id){
window.clearTimeout(id);
}
})();
<template>
<div>
adadadad
</div>
</template>
<script>
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
export default {
components: {},
// 定义属性
data() {
return {
time:null,
elapsed:null,
lastUpdate:null,
}
},
// 计算属性,会监听依赖属性值随之变化
computed: {
},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
setnum:function(num){
let _this = this;
var now = new Date();
var elapsed = now - _this.lastUpdate;
if(elapsed >= 5000){
console.log('每隔5000毫秒执行',elapsed);
_this.lastUpdate = new Date();
window.cancelAnimationFrame(_this.time);
_this.time = window.requestAnimationFrame(_this.setnum);
}else{
_this.time = window.requestAnimationFrame(_this.setnum);
}
},
},
// 生命周期 - 创建完成(可以访问当前this实例)
created() {
let _this = this;
_this.lastUpdate = new Date();
_this.setnum();
// window.cancelAnimationFrame(_this.time)
},
// 生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
activated() {}, // 如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style lang='less' scoped>
</style>
也可以这样
<template>
<div>
adadadad
</div>
</template>
<script>
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
// (function() {
// var lastTime = 0;
// var vendors = ['ms', 'moz', 'webkit', 'o'];
// for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
// window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
// window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
// }
// if (!window.requestAnimationFrame)
// window.requestAnimationFrame = function(callback, element) {
// var currTime = new Date().getTime();
// var timeToCall = Math.max(0, 16 - (currTime - lastTime));
// var id = window.setTimeout(function() { callback(currTime + timeToCall); },
// timeToCall);
// lastTime = currTime + timeToCall;
// return id;
// };
// if (!window.cancelAnimationFrame)
// window.cancelAnimationFrame = function(id) {
// clearTimeout(id);
// };
// }());
export default {
components: {},
// 定义属性
data() {
return {
time:null,
elapsed:null,
lastUpdate:null,
}
},
// 计算属性,会监听依赖属性值随之变化
computed: {
},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
ressetrequestAnimationFrame:function(){
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
},
setnum:function(num){
let _this = this;
var now = new Date();
var elapsed = now - _this.lastUpdate;
if(elapsed >= 5000){
console.log('每隔5000毫秒执行',elapsed);
_this.lastUpdate = new Date();
window.cancelAnimationFrame(_this.time);
_this.time = window.requestAnimationFrame(_this.setnum);
}else{
_this.time = window.requestAnimationFrame(_this.setnum);
}
},
},
// 生命周期 - 创建完成(可以访问当前this实例)
created() {
let _this = this;
_this.ressetrequestAnimationFrame();
_this.lastUpdate = new Date();
_this.setnum();
// window.cancelAnimationFrame(_this.time)
},
// 生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
activated() {}, // 如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style lang='less' scoped>
</style>