Question

我有这个countDown，每次按下我想再添加5秒的按钮。

当时间更新时，该功能会倒计时新值，但也会倒计时旧值。

有人能解释我为什么吗？

$('button').on('click', function() {
    var newtime = parseInt(seconds + 5);
    timer(newtime);    
});

Answer 1

您可以尝试使用全局变量来跟踪剩余的秒数。单击该按钮将增加此变量。

var timeLeft = 10;

function timer() {
    var i = setInterval(function () {
        $('span').text(timeLeft);
        timeLeft--
        if (timeLeft === 0) clearInterval(i)
    }, 1000)
}

function addSeconds(n) {
    timeLeft += n
}

timer()

$('button').on('click', function () {
    addSeconds(5)
});

演示（1）：http://jsfiddle.net/xqdj3uz8/21/

Answer 2

请使用它

function timer(time) {
    var interval = setInterval(countDown, 1000);    
    function countDown() {
        time--;
        $('span').text(time);

        if(time === 0) {
            clearInterval(interval);
        }

    }      



    $('button').on('click', function() {

         time=parseInt(time + 5);
         $('span').text(time); 

    });
}

var seconds = 5;
timer(seconds);

Answer 3

试一下

<强> Working JSFIDDLE

var gblTime=0;
function timer(time) {
    var interval = setInterval(countDown, 1000); 
    gblTime = time;
    function countDown() {
        gblTime--;
        $('span').text(gblTime);

        if(gblTime <= 0) {
            clearInterval(interval);
        }

    }        
}

var seconds = 5;
timer(seconds);

$('button').on('click', function() {

    gblTime = parseInt(gblTime +1+ 5);
    //timer(newtime);    
});

Answer 4

您正在添加彼此独立的新间隔，请尝试：

var time = 5;
var seconds = 5;

function timer() {
  var interval = setInterval(countDown, 1000);    
  function countDown() {

    $('span').text(time);
    if(time === 0) {
        clearInterval(interval);
    }
    time--;        
  }        
}

timer();

$('button').on('click', function() {  
  if(time==0){
    timer();
  }
  time += seconds;
});

setInterval countDown更新时间

4 个答案: