js延迟执行函数_你需要知道如何将函数延迟到下一帧执行的黑科技？

前言

很多场景下，需要将函数延迟到下一帧,甚至下下帧去执行，这在动画场景特别常见。通过这种方式可以在保持动画帧率的同时也能更大限度的提升代码性能。

1、设置延迟到下一帧执行的函数

• ID生成器

在设置函数之前需要先设计一个ID生成器，用于生产唯一的ID字段:

• RAF函数设置

大家可能已经猜到需要通过requestAnimationFrame(rAF)将函数延迟到下一帧了，但是在设计之前需要给出通用的rAF函数，请看下面代码:

• 插入下一帧执行函数

• 插入下下帧执行

这个函数是把函数执行推迟到下一帧，而且每次都会产生一个独一无二的qid值作为数组的键，而值是rAF函数返回的一个唯一的值。当下一帧这个函数执行后那么我们就会从这个数组中清除相应的键和值，但是这里采用的delete删除，因此会留下undefined!

• 取消函数回调

因为每一个rAF函数都会返回一个独一无二的整数，而且这个整数是由浏览器决定的。通过这个整数我们可以取消某一个调用。下面是函数的完整设计代码:

(function(h5){if (!h5) throw new Error("animationFrame.h5ive: core.h5ive required.");var rAF = (window.requestAnimationFrame || window.msRequestAnimationFrame ||window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||window.oRequestAnimationFrame),cAF = (window.cancelAnimationFrame ||window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame ||window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame ||window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame ||window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame),publicAPI, q_ids = {};function qID(){var id;do {id = Math.floor(Math.random() * 1E9);} while (id in q_ids);return id;}function queue(cb) {var qid = qID();q_ids[qid] = rAF(function(){delete q_ids[qid];cb.apply(publicAPI,arguments);});return qid;}function queueAfter(cb) {var qid;qid = queue(function(){q_ids[qid] = rAF(function(){delete q_ids[qid];cb.apply(publicAPI,arguments);});});return qid;}function cancel(qID) {if (qID in q_ids) {cAF(q_ids[qID]);delete q_ids[qID];}return publicAPI;}function unsupported() {throw new Error("'requestAnimationFrame' not supported.");}if (rAF && cAF) {publicAPI = {queue: queue,queueAfter: queueAfter,cancel: cancel};}else {publicAPI = {queue: unsupported,queueAfter: unsupported,cancel: unsupported};}h5.animationFrame = publicAPI; })(this.h5);

2、本文总结

本文主要讲解了通过rAF将函数执行延迟到下一帧和下下帧的方法，这些方法在高性能动画领域是很值得探究和使用的。希望对大家有帮助，我们下期再见