requestAnimationFrame组合调用问题：每5秒执行2秒时长fade函数

你的代码只执行一次动画的核心问题是全局变量start没有在每次动画结束后重置。第一次fade函数执行完毕后，start仍然保留着第一次动画的时间戳，后续触发fade时，timeStamp - start会直接远大于2000，计算出的opacity≥1，导致函数直接return，不会执行动画逻辑。

修复方案 #

把start变量移到fade函数内部，让每次调用fade时都重新初始化这个变量，确保每次动画都从正确的起始时间开始计算。

修改后的代码：

let lastTimeStamp = 0;
const interval = 5000; // 5秒间隔
const fadeDuration = 2000; // 2秒动画时长

function fadeTimeout(timeStamp) {
  if (!lastTimeStamp || timeStamp - lastTimeStamp >= interval) {
    lastTimeStamp = timeStamp;
    
    function fade(timeStamp) {
      // 把start放到fade内部，每次调用都重新初始化
      let start = start ?? timeStamp;
      const opacity = (timeStamp - start) / fadeDuration;
      
      if (opacity >= 1) {
        document.getElementById('box').style.opacity = 0;
        return;
      }
      
      document.getElementById('box').style.opacity = opacity;
      window.requestAnimationFrame(fade);
    }
    
    window.requestAnimationFrame(fade);
  }
  window.requestAnimationFrame(fadeTimeout);
}

window.requestAnimationFrame(fadeTimeout);

额外优化说明 #

• 把魔法数字（5000、2000）提取为命名常量，代码可读性更高
• 使用??空值合并运算符初始化start，逻辑更简洁
• 确保每次动画结束后将元素opacity设为0，为下一次动画做好准备

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