如何用requestAnimationFrame替代setInterval实现按钮指定频率闪烁？

Absolutely! requestAnimationFrame() is far more suitable for this kind of UI animation than setInterval()—here’s why, plus a step-by-step implementation:

Why It’s a Better Choice #

• Syncs with the browser’s refresh rate (usually 60fps), so your blinking will be smooth and never jittery from misaligned timing.
• Automatically pauses when the tab is inactive, saving system resources (something setInterval() doesn’t do by default).
• Avoids the "drift" issue with setInterval(): if the main thread is blocked, setInterval() will queue up missed calls and fire them all at once when free, while requestAnimationFrame() just skips the missed frames and picks up where it left off.

How to Implement Button Blinking with requestAnimationFrame() #

First, let’s set up a basic HTML button:

<button id="blinkingBtn">Click Me (Blinking!)</button>

Now the JavaScript implementation. The key idea is to track the time elapsed since the last state change, and toggle the button’s visibility/style only when our desired interval has passed:

const blinkingBtn = document.getElementById('blinkingBtn');
const blinkInterval = 500; // Blink every 500ms (0.5 seconds)
let lastBlinkTime = 0;
let isVisible = true;
let animationId = null;

function blink(timestamp) {
  // Calculate time since last blink
  if (timestamp - lastBlinkTime >= blinkInterval) {
    // Toggle the button's visibility (or use opacity/background color)
    isVisible = !isVisible;
    blinkingBtn.style.visibility = isVisible ? 'visible' : 'hidden';
    // Update last blink time to current timestamp
    lastBlinkTime = timestamp;
  }

  // Keep the animation loop going
  animationId = requestAnimationFrame(blink);
}

// Start the blinking
blink(performance.now());

// To stop the blinking later (e.g., on button click):
// blinkingBtn.addEventListener('click', () => {
//   cancelAnimationFrame(animationId);
// });

Customization Tips #

• Instead of visibility, you can animate opacity for a smoother fade-in/out blink:

  blinkingBtn.style.opacity = isVisible ? 1 : 0;
  

• Adjust blinkInterval to make the blink faster or slower (e.g., 1000 for 1-second intervals).
• Add CSS transitions if you want a gradual blink instead of a hard toggle:

  #blinkingBtn {
    transition: opacity 0.2s ease;
  }
  

Quick Comparison to setInterval() #

If you were using setInterval(), you might have code like this:

setInterval(() => {
  isVisible = !isVisible;
  blinkingBtn.style.visibility = isVisible ? 'visible' : 'hidden';
}, 500);

But this can lead to janky animation if the browser is busy, and it wastes resources when the tab isn’t active. requestAnimationFrame() fixes both these issues.

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