jQuery Flipclock修改时间后interval打印重复值与stop回调异常问题

问题原因 #

你遇到的两个问题本质都是同一个原因导致：每次调用countdown()函数时都会新建一个FlipClock实例，旧实例没有被销毁，残留的回调仍在运行：

1. 新旧实例的interval回调同时给.info元素赋值，导致旧计时数值和新数值交替显示
2. 新实例初始化时旧实例会被触发stop事件，所以点击修改按钮时会误弹出「Counting done」提示

修复后的代码 #

只需修改JS部分即可：

// 全局存储FlipClock实例
let clock = null;

$('.modifytime').on('click', function() {
  countdown(10);
});

function countdown(b) {
  // 销毁旧实例前先清空其stop回调，避免误触发弹窗
  if(clock !== null) {
    clock.setOption('callbacks', { stop: () => {} });
    clock.destroy();
  }
  const countTime = b === undefined ? 15 : 10;

  clock = $('.clock').FlipClock(countTime, {
    clockFace: 'MinuteCounter',
    countdown: true,
    autoStart: true,
    callbacks: {
      start: function() {
        $('.message').html('The clock has started!');
      },
      interval: function() {
        const time = this.factory.getTime().time;
        $('.info').html(time);
      },
      stop: function(){
        alert("Counting done");
      }
    }
  });
}

countdown();

修改说明 #

• 全局声明clock变量存储当前运行的FlipClock实例，每次初始化新实例前先销毁旧实例，清除残留回调
• 销毁旧实例前先清空它的stop回调，避免销毁操作触发不必要的弹窗
• 修正了原代码中未声明的隐式全局变量，避免变量污染

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