setInterval重新计算？

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> 

当我点击重新计数时，我想要做的事情是重新计时10秒钟？

我怎么可能做到这一点？ 最好使用setInterval()或setTimeout()？

Answer 1

分解出你的代码的功能，所以你可以调用在启动时或相同的代码链接被点击。你可以看到它在这里工作：http://jsfiddle.net/jfriend00/x3S7j/。这甚至可以让你在倒计时期间点击链接，它将重新开始。

$("#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); 

Answer 2

当您单击各显神通，你应该

sec = 10; 
clearInterval(timer); 
timer = setInterval(that_function, 1000); 

此外，还有setInterval和setTimeout之间的差异。 setInterval调度每个毫秒需要调用的函数。 setTimeout调度函数在几毫秒后调用一次。

Answer 3

你可以只添加一个单击处理程序，并分解出你的代码在一个单独的方法：

var sec = 10; 
var timer; 

function startCountdown() { 
    if (timer) clearInterval(timer); 
    sec = 10; 

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

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

Working JSFiddle