requestAnimationFrame的兼容性写法

原因

当浏览器不支持requestAnimationFrame的时候，会导致程序运行不正常，故需要一个兼容性写法避免程序出错。

示例

如果浏览器不支持 requestAnimationFrame API，并且您需要实现类似的功能，可以考虑使用 setTimeout 函数来模拟实现。以下是一个简单的示例代码：

// 获取屏幕刷新率
var refreshRate = window.screen.refreshRate || 60; // 如果无法获取到刷新率，默认设置为 60
 
// 模拟 requestAnimationFrame
var requestAnimationFrame = window.requestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.msRequestAnimationFrame ||
                            function(callback) {
                              return setTimeout(callback, 1000 / refreshRate);
                            };
 
// 模拟 cancelAnimationFrame
var cancelAnimationFrame = window.cancelAnimationFrame ||
                           window.mozCancelAnimationFrame ||
                           function(id) {
                             clearTimeout(id);
                           };
 
// 使用模拟的 requestAnimationFrame
function animate() {
  // 在动画帧中执行的操作
  requestAnimationFrame(animate);
}
 
// 启动动画
animate();

在这段代码中，我们首先尝试获取浏览器原生支持的 requestAnimationFrame 方法，如果获取不到则使用 setTimeout 函数来模拟实现。同时也提供了相应的 cancelAnimationFrame 方法的模拟实现。

通过这种方式，即使浏览器不支持 requestAnimationFrame API，您仍然可以使用 setTimeout 函数来实现类似的动画效果。请注意，由于 setTimeout 的精度可能不如 requestAnimationFrame，因此模拟的效果可能会略有不同。