jQuery Flipclock在间隔函数内显示重复的打印文本

Question

我正在与jQuery Flipclock合作

效果很好。 然后现在我有按钮修改时间，如果我单击它，时间将更改为 10 秒并将文本打印到 span 信息中。但是为什么还是会出现旧的计数值呢？如何在不显示旧计数值的情况下仅在 10 秒内（单击按钮）打印到 span 信息？

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


function countdown(b) {
  if (b == undefined) {
    a = 15;
  } else {
    a = 10
  }

  clock = $('.clock').FlipClock(a, {
    clockFace: 'MinuteCounter',
    countdown: true,
    autoStart: true,
    callbacks: {
      start: function() {
        $('.message').html('The clock has started!');
      },
      interval: function() {
        var time = this.factory.getTime().time;

        $('.info').html(time);
      },
      stop: function(){
        alert("Counting done");
      }
    }
  });
}

countdown();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://kms.puksiix.com/flipclock.css" rel="stylesheet" />
<script src="https://kms.puksiix.com/flipclock.js"></script>

<div class="clock"></div>
<span class="info"></span>

<button class="modifytime">Modify</button>

更新 如果我把这个脚本：

stop: function(){
    alert("Counting done");
}

即使我只是点击按钮，它也总是显示“计数完成”。

Answer 1

那个相当过时的库的文档似乎不再存在。但是，如果您在 Github 中查看库的源代码，您会发现有一个可以在实例上调用的 stop() 方法。

要在按钮单击之间保留对实例的引用，您可以将其存储在 data 旁边的 .clock 元素中，如下所示：

let $clock = $('.clock');

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

function countdown(delay) {
  delay = delay || 100;
  
  // check for previous instance and stop it counting down
  let prevInstance = $clock.data('flipclock');
  if (prevInstance)
    prevInstance.stop();
  
  let clockInstance = $clock.FlipClock(delay, {
    clockFace: 'MinuteCounter',
    countdown: true,
    autoStart: true,
    callbacks: {
      start: function() {
        $('.message').html('The clock has started!');
      },
      interval: function() {
        var time = this.factory.getTime().time;
        $('.info').html(time);
      }
    }
  });

  // save new instance in element metadata
  $clock.data('flipclock', clockInstance);
}

countdown();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://kms.puksiix.com/flipclock.css" rel="stylesheet" />
<script src="https://kms.puksiix.com/flipclock.js"></script>

<div class="clock"></div>
<span class="info"></span>
<button class="modifytime">Modify</button>

Answer 2

快速浏览源代码表明您可以在开始新时钟之前.stop 现有时钟：

clock.stop();

将此添加到您的 countdown() 函数中。 Snippet 包含第二个按钮，用于停止以显示此独立工作。

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

$(".stop").on("click", function() { clock.stop(); });


var clock;

function countdown(b) {
  if (b == undefined) {
    a = 100;
  } else {
    a = 10
  }

  if (clock) clock.stop();

  clock = $('.clock').FlipClock(a, {
    clockFace: 'MinuteCounter',
    countdown: true,
    autoStart: true,
    callbacks: {
      start: function() {
        $('.message').html('The clock has started!');
      },
      interval: function() {
        var time = this.factory.getTime().time;

        $('.info').html(time);
      }
    }
  });
}

countdown();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://kms.puksiix.com/flipclock.css" rel="stylesheet" />
<script src="https://kms.puksiix.com/flipclock.js"></script>

<div class="clock"></div>
<span class="info"></span>

<button class="modifytime">Modify</button>
<button class="stop">Stop</button>