JS如何为秒表编写时间限制功能并实现自动停止触发逻辑

实现思路 #

• 新增全局变量存储设置的最大计时时长、计时结束触发的回调函数
• 在每次render渲染计时值时判断当前时长是否超过限制，超过则自动调用停止函数触发结束逻辑

修改后的完整代码 #

let offset = 0,
  paused = true,
  // 最大计时时长，单位毫秒，默认0代表无限制
  maxDuration = 0,
  // 计时到点后的回调函数，可自定义
  onTimesUp = null;

render();

function startStopwatch(evt) {
  if (paused) {
    paused = false;
    offset -= Date.now();
    render();
  }
}

function stopStopwatch(evt) {
  if (!paused) {
    paused = true;
    offset += Date.now();
  }
}

function resetStopwatch(evt) {
  if (paused) {
    offset = 0;
    render();
  } else {
    offset = -Date.now();
  }
}

function format(value, scale, modulo, padding) {
  value = Math.floor(value / scale) % modulo;
  return value.toString().padStart(padding, 0);
}

function render() {
  var value = paused ? offset : Date.now() + offset;

  // 时长限制判断逻辑
  if (maxDuration > 0 && value >= maxDuration) {
    stopStopwatch();
    // 触发自定义结束回调
    if (typeof onTimesUp === 'function') {
      onTimesUp();
    }
    // 修正最终显示时间，避免超出限制值
    value = maxDuration;
  }

  document.querySelector('#s_ms').textContent = format(value, 1, 1000, 3);
  document.querySelector('#s_seconds').textContent = format(value, 1000, 60, 2);
  document.querySelector('#s_minutes').textContent = format(value, 60000, 60, 2);
  document.querySelector('#s_hours').textContent = format(value, 3600000, 24, 2);
  if (!paused) {
    requestAnimationFrame(render);
  }
}

使用示例 #

设置1分钟计时自动停止，结束后打印提示：

// 设置最大时长为1分钟（单位毫秒）
maxDuration = 60 * 1000;
// 自定义结束回调
onTimesUp = () => {
  console.log('计时已结束');
};
// 正常启动秒表即可
startStopwatch();

内容的提问来源于stack exchange，提问作者s.alonzo