Question

 var sec = 10 
var timer = setInterval(function() {   
$('#timer span').text(sec--);    
if (sec == -1) {
     clearInterval(timer);  
} }, 1000);

 html

<div id="timer"><span>10</span> seconds</div>
<a href="#" id="recount">Recount</a>

What I want to do when I click recount is to recount back to 10 seconds the timer?

How can I possibly done it?
It is better to use setInterval() or setTimeout()?

Answer 1

Factor out your code into functions so you can call the same code on startup or when the link is clicked. You can see it working here: http://jsfiddle.net/jfriend00/x3S7j/. This even allows you to click the link during the countdown and it will start over.

$("#recount").click(function() {
    initCounter(10);
});

var remainingTime; 
var runningInterval = null;

function initCounter(duration) {

    function stopCounter() {
        if (runningInterval) {
            clearInterval(runningInterval);
            runningInterval = null;
        }
    }

    stopCounter();                              // stop previously running timer
    remainingTime = duration;                   // init duration
    $('#timer span').text(remainingTime);       // set initial time remaining
    runningInterval = setInterval(function() {  // start new interval
        $('#timer span').text(remainingTime--);    
        if (remainingTime < 0) {
            stopCounter();
        } 
    }, 1000);
}


initCounter(10);