【针对低版本的浏览器，requestAnimationFrame的兼容性写法】

最新推荐文章于 2024-04-05 02:42:05 发布

Min_Fox

最新推荐文章于 2024-04-05 02:42:05 发布

阅读量629

点赞数 6

分类专栏： js 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/min_fox/article/details/135347201

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何在不同浏览器环境下实现requestAnimationFrame和cancelAnimationFrame功能，确保动画在各种浏览器中的流畅性，以提升用户体验。

摘要由CSDN通过智能技术生成

(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'] ||    // Webkit中此取消方法的名字变了
                                      window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (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);
        };
    }
}());