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

您只需添加一个点击处理程序，然后在单独的方法中分解代码：

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

Answer 2

将代码分解为函数，以便在启动时或单击链接时调用相同的代码。你可以在这里看到它：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 3

点击重新计数时，您应该

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

此外，setInterval和setTimeout之间存在差异。 setInterval计划每隔几毫秒调用一次函数。 setTimeout计划在几毫秒后调用一次函数。

setInterval重新计算？

3 个答案: