requestAnimationFrame 浏览器/小程序/Vue 兼容写法

2019-03-13 5523 javascript

requestAnimationFrame 在浏览器/Vue 中的兼容替代

如下：

(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
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) {
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);
};
}
}());

使用时：

// 兼容定义
var nextAni = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (cb) { window.setTimeout(cb, 1000 / 60) };
// 使用
nextAni(someFunc);

如下：

(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for (var x = 0; x < vendors.length && !requestAnimationFrame; ++x) {
requestAnimationFrame = vendors[x] + 'RequestAnimationFrame';
cancelAnimationFrame = vendors[x] + 'CancelAnimationFrame' || vendors[x] + 'CancelRequestAnimationFrame';
}
if (!requestAnimationFrame) {
requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!cancelAnimationFrame) {
cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());

使用时：

// 兼容定义
const nextAni = requestAnimationFrame || webkitRequestAnimationFrame || mozRequestAnimationFrame || msRequestAnimationFrame || oRequestAnimationFrame || function (cb) { setTimeout(cb, 1000 / 60) };
// 使用时
nextAni(someFunc);

完毕！

网络文章，如若转载，请注明出处：http://loc.darlang.com/post/1056.html

window requestAnimationFrame setTimeout 兼容 cancelAnimationFrame