window.requestAnimationFrame 封装与使用

天空之枫

已于 2022-06-27 21:54:07 修改

阅读量1k

点赞数

分类专栏： vue js

于 2022-04-07 22:37:38 首次发布

本文链接：https://blog.csdn.net/sinat_24713805/article/details/124028706

版权

js vue.js

js 同时被 2 个专栏收录

65 篇文章 1 订阅

订阅专栏

vue

45 篇文章 0 订阅

订阅专栏

优点：

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>

天空之枫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
window.requestAnimationFrame 封装与使用

优点：requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态（不观测页面时不运行）下的话，动画会自动暂停，有效节省了CPU开销总而言之，性能好
复制链接

扫一扫

专栏目录