Making this timer start with a button

Question

I found this neat countdown timer and I was curious if someone could help with a few changes to it.

Start on the click of a button.
Where would I place an AJAX call function to a PHP file for when the timer hits 0?
Repeat when it is finished.

The timer I found is here: http://jsfiddle.net/johnschult/gs3WY/

var countdown = $("#countdown").countdown360({
radius: 60,
seconds: 20,
label: ['sec', 'secs'],
fontColor: '#FFFFFF',
autostart: false,
onComplete: function () {
  console.log('done');
}
});

countdown.start();

$('#countdown').click(function() {
  countdown.extendTimer(2);
});

Thanks in advance for any help given.

score 6 · Answer 1 · edited Jun 20 '20 at 09:12

Here is how you could do that with just a little bit of modification. Check out the JSFiddle.

var countdown;

function initializeTimer(){
    //Initialization
    countdown = $("#countdown").countdown360({
        radius: 60,
        seconds: 20,
        label: ['sec', 'secs'],
        fontColor: '#FFFFFF',
        autostart: false,
        onComplete: function () {
            //Place AJAX call here!

            //Re-start the timer once done
            initializeTimer();
            startTimer();
        }
    });
    
    //Call this, otherwise widget does not show up on the screen. Stop immediately after.
    countdown.start();
    countdown.stop();
}

//Manually invoke the first initialization
initializeTimer();

function startTimer(){
    countdown.start();
}

$('#countdown').click(function() {
  countdown.extendTimer(2);
});

//Start the timer on the button click
$('#start').click(function(){
    startTimer();
});

You would put your code to call ajax inside the onComplete handler.

UPDATE: included code to re-start the process once complete and updated fiddle.

Beat me on the "Call this, otherwise widget does not show up on the screen. Stop immediately after." part. Good catch! — ilter, Apr 20 '15 at 19:26
Thank you so much. :) I've been stuck on this for a while and was nervous with asking. — FacetiousFemme, Apr 20 '15 at 20:13
You shouldn't feel yourself nervous asking your questions here. We are all here to learn, just like you, even when answering someone else's questions ;) — ilter, Apr 20 '15 at 20:16

score 3 · Answer 2 · answered Apr 20 '15 at 19:24

You nearly nailed it :)

Try that:

$('#start').click(function() {
    countdown.start();
});

$('#extend').click(function() {
    countdown.extendTimer(2);
});

Now you have two buttons, and both are functioning (one to start, the other to extend the timer for 2 seconds).

Here's the working code.

EDIT: @p e p's code gives more functionality like showing counter on the screen as soon as the script loads. Would go with his suggestion.

Making this timer start with a button

2 Answers2