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.

1. Start on the click of a button.
2. Where would I place an AJAX call function to a PHP file for when the timer hits 0?
3. 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.

Answer 1

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.

Answer 2

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.