如何为JavaScript倒计时器实现剩余10秒时的颜色闪烁效果？

嘿，我来帮你搞定这个倒计时器的闪烁效果！先说说你现有代码的小问题：每次timer < 10时都会调用setInterval(flash,1000)，这会导致重复创建多个闪烁定时器，到最后闪烁频率会越来越乱，完全失控。咱们来调整一下：

首先，咱们需要：

• 只在第一次进入10秒倒计时时创建一个闪烁定时器
• 倒计时结束后要清除这个闪烁定时器，避免内存泄漏
• 定义清晰的flash函数来实现闪烁逻辑

修改后的完整代码如下：

function startTimer(duration, display) { 
  var timer = duration, minutes, seconds;
  // 用来保存闪烁定时器的ID，方便后续清除
  let flashTimer;

  // 定义闪烁函数：切换元素的可见性或者样式
  function flash() {
    // 这里可以切换display的显示/隐藏，或者修改样式（比如颜色）
    display.toggle();
    // 如果想要颜色闪烁，可以用下面的代码替换上面的toggle：
    // display.css('color', display.css('color') === 'red' ? 'black' : 'red');
  }

  // 倒计时的主定时器
  const countdownTimer = setInterval(function () { 
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10); 
    minutes = minutes < 10 ? "0" + minutes : minutes; 
    seconds = seconds < 10 ? "0" + seconds : seconds; 
    display.text(minutes + ":" + seconds); 

    // 当剩余时间小于10秒，且还没创建闪烁定时器时，启动闪烁
    if (timer < 10 && !flashTimer) {
      flashTimer = setInterval(flash, 500); // 500毫秒间隔会比1秒更明显，你可以调整
    }

    // 倒计时结束时，清除所有定时器
    if (--timer < 0) {
      clearInterval(countdownTimer);
      if (flashTimer) clearInterval(flashTimer);
      // 可以在这里添加倒计时结束的提示，比如：
      display.text("时间到！");
      display.show(); // 确保最后显示内容
    }
  }, 1000);
}

关键细节说明： #

• flashTimer变量：用来存储闪烁定时器的ID，确保我们只创建一次闪烁定时器，并且能在倒计时结束时清除它。
• flash函数：这里用了jQuery的toggle()方法切换元素显示/隐藏，你也可以改成切换文字颜色（注释里的代码），根据你的需求调整。
• 定时器清除逻辑：倒计时结束时，必须清除主倒计时定时器和闪烁定时器，避免无用的定时器继续运行。
• 闪烁时机判断：只有当timer <10且flashTimer不存在时，才创建闪烁定时器，避免重复创建。

这样修改后，倒计时器在剩余10秒时会稳定闪烁，结束后自动停止，不会出现混乱的情况啦！

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