为何JSLint不认可requestAnimationFrame()？如何兼容配置使其正常运行

我懂你现在遇到的这个矛盾——JSLint的严格校验和浏览器实际运行需求好像对着干了，其实核心原因是JSLint默认只认可ECMAScript标准里的全局变量/函数，而requestAnimationFrame是浏览器提供的专属API，不属于标准JS的范畴，所以JSLint会默认把它当成未定义的变量。

先拆解下你碰到的两种代码情况：

• 那段能通过JSLint但无法运行的代码：你手动定义了一个空的function requestAnimationFrame() {"use strict"; }，JSLint看到这个定义就认为它是合法函数，但这个空函数直接覆盖了浏览器原生的requestAnimationFrame，浏览器调用时自然没有任何动画效果。
• 那段能正常运行但过不了JSLint的代码：你直接用了浏览器原生的API，但JSLint不知道这个全局函数的存在，所以报错提示“未定义”。

接下来给你两个靠谱的解决方案，既能通过JSLint校验，又不影响浏览器正常运行：

方案1：直接告知JSLint这是全局变量 #

最简单的方式是在代码顶部添加全局声明注释，明确告诉JSLintrequestAnimationFrame是合法的全局函数：

/* global requestAnimationFrame */
"use strict";

// 你的动画代码示例
function animate() {
  // 这里写具体的动画逻辑
  requestAnimationFrame(animate);
}
animate();

这样JSLint就不会再报“未定义”的错误，同时你用的还是浏览器原生的requestAnimationFrame，动画能正常运行。

方案2：添加兼容性封装（推荐） #

如果需要兼容一些不支持requestAnimationFrame的旧浏览器，同时让JSLint认可，可以做一个兼容性处理：

/* global requestAnimationFrame, cancelAnimationFrame */
"use strict";

// 先检测浏览器是否原生支持，不支持就模拟实现
if (!window.requestAnimationFrame) {
  window.requestAnimationFrame = function(callback) {
    // 模拟约60fps的刷新间隔
    return setTimeout(callback, 1000 / 60);
  };

  window.cancelAnimationFrame = function(id) {
    clearTimeout(id);
  };
}

// 你的动画逻辑示例
function animate() {
  const element = document.getElementById("animate-element");
  let left = parseInt(window.getComputedStyle(element).left, 10);
  element.style.left = `${left + 1}px`;

  if (left < 300) {
    requestAnimationFrame(animate);
  }
}
animate();

这个方案的优势很明显：

• 全局注释让JSLint认可这两个函数的存在
• 兼容旧浏览器，不会因为原生API不存在而报错
• 正常浏览器依然使用原生的requestAnimationFrame，保证动画性能

总结一下：别用空函数去定义requestAnimationFrame来“骗”JSLint，要么直接声明它是全局变量，要么做兼容性封装，这样就能同时兼顾校验要求和实际运行需求啦。

内容的提问来源于stack exchange，提问作者NoobiestNoob