使用jQuery countdown库实现先到开始时间再到结束时间的问题求解

问题原因 #

你遇到的onExpiry触发后无动作的核心原因是：同一个元素上的旧倒计时实例未被清理，直接重新初始化时残留状态导致逻辑卡住，部分版本的countdown库不支持在未销毁旧实例的情况下直接覆盖配置。

解决代码 #

推荐两种修复方式，任选一种即可：

方式1：先销毁旧实例再初始化新倒计时

// 请提前确认startdate、stopdate均为合法的Date对象，且stopdate时间晚于startdate
const startdate = new Date('替换为你的起始时间');
const stopdate = new Date('替换为你的结束时间');

function startTimers() {
  $('#auction-counter').countdown({
    until: startdate,
    onExpiry: stopTimer,
    format: 'DHMS',
    padZeroes: true,
    alwaysExpire: true
  });
}

function stopTimer() {
  // 销毁旧的倒计时实例，清除残留状态
  $('#auction-counter').countdown('destroy');
  // 启动到结束时间的倒计时
  $('#auction-counter').countdown({
    until: stopdate,
    format: 'DHMS',
    padZeroes: true,
    alwaysExpire: true
  });
}

// 页面加载完成后启动倒计时
$(startTimers);

方式2：直接更新倒计时配置（更高效）

不需要销毁实例，直接调用option方法更新结束时间即可，代码更简洁：

function stopTimer() {
  $('#auction-counter').countdown('option', 'until', stopdate);
}

注意事项 #

• 务必确认startdate和stopdate是合法的Date类型，如果传入的是格式错误的字符串、时间戳，或者stopdate早于startdate，都会直接显示00:00:00
• 不要将回调函数放在无法被外部访问的闭包作用域内，确保onExpiry能正常调用到对应的处理函数

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