CODEWITHSUNDEEP
javascripthtmljqueryflipclock
HiDayurie Dave
HiDayurie Dave

Reputation: 1807

jQuery Flipclock show print text duplicate inside interval function

I'm working with jQuery Flipclock

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

UPDATED If I put this script:

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

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

Upvotes: 1

Views: 70

Answers (2)

fdomn-m
fdomn-m

Reputation: 28621

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

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337656

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

Upvotes: 1

Related Questions