jQuery Flipclock show print text duplicate inside interval function

Question

It's working good. Then now I have button modify time, if I click it then the time will be change to 10 seconds and print the text into span info. But why the old counting value is still appear? How to print into span info only 10 seconds (on button click) without show the old counting value?.

$('.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();

UPDATED If I put this script:

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

It always show me "Counting done" even I just click the button.

user_519413 · Answer

The documentation of that rather outdated library seems to no longer exist. However if you look through the source of the library in Github you can see there is a stop() method which can be called on the instance.

To retain a reference to the instance between button clicks you can store it in the data alongside the .clock element, something like this:

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();

user_2181514 · Answer

A quick perusal of the source shows you can .stop the existing clock before starting a new one:

clock.stop();

Add this to your countdown() function. Snippet includes a second button to stop to show this working independently.

$('.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();

jQuery Flipclock show print text duplicate inside interval function

2 Answers