window.requestAnimationFrame 封装与使用

优点：requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的

天空之枫

1173人浏览 · 2022-04-07 22:37:38

天空之枫 · 2022-04-07 22:37:38 发布

优点：

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>

MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

【CodeBuddy + 自制MCP】给AI装上翅膀，快速绘制思维导图

MCP技术社区

如何将普通HTTP API接口改造为MCP服务器

创建.proto通过本文的四步改造法，你可获得：✅ 配置更新延迟降低90%✅ 网络带宽消耗减少70%✅ 服务端资源占用下降60%✅ 原生支持百万级节点连接升级到MCP不仅是协议转换，更是配置分发模式的架构进化。立即行动，让你的微服务配置管理进入实时推送时代！更多Istio进阶技巧请关注专栏【Service Mesh深度实践】