Question

我正在制作一个倒数计时器。当我取出setInterval（）函数，并在不暂停的情况下减少时间时，程序正常工作。

但是当我使用setInterval（）函数来调用每秒减少时间的代码时，程序就会挂起。

function timeControl() {
   var minutesLeft = $('#minutes').text();
   var secondsLeft = $('#seconds').text();

    while(Number(minutesLeft) > 0 || Number(secondsLeft) > 0) {
        window.setInterval(decreaseTime, 1000);

        minutesLeft = $('#minutes').text();
        secondsLeft = $('#seconds').text();
    }
 }


function decreaseTime() {
   var secondsLeft = $('#seconds').text();
   var minutesLeft = $('#minutes').text();
   if((Number(minutesLeft) > 0) && (Number(secondsLeft) == 0)) {
     $('#minutes').text(Number(minutesLeft) - 1);
     $('#seconds').text(4);
    } else {
       $('#seconds').text(Number(secondsLeft) - 1);
    }
 }

Answer 1

您添加while并且循环非常快，因此您setInterval()多次呼叫，因此浏览器挂起。您不需要while，因为setInterval每次都在setInterval第二个参数中定义时运行。您可以使用以下代码：

var decreaseTimeInterval;
function timeControl() {
    decreaseTimeInterval = window.setInterval(decreaseTime, 1000);
}

function decreaseTime() {
    var secondsLeft = $('#seconds').text();
    var minutesLeft = $('#minutes').text();
    if((Number(minutesLeft) > 0) && (Number(secondsLeft) == 0)) {
        $('#minutes').text(Number(minutesLeft) - 1);
        $('#seconds').text(4);
    } else if(Number(minutesLeft) == 0 && Number(secondsLeft) == 0) { //end of script
        clearInterval(decreaseTimeInterval); //clear interval to prevent do again
    } else {
        $('#seconds').text(Number(secondsLeft) - 1);
    }
}

Answer 2

您似乎将异步setInterval函数与同步sleep类型的函数混为一谈。他们是完全不同的。 setInterval函数为您设置计时器。它说，＆＃34;每y毫秒运行一次函数x＆＃34;。但是在这里，你在while循环中将这个函数设置为不同的时间。从本质上讲，你开始设置越来越多的计时器，数百或数千计时器，每一个计时器每1秒运行一次decreaseTime功能，直到程序挂起。

您要做的是将setInterval函数放在程序的顶层，并让它每1000毫秒运行timeControl函数。从timeControl函数中删除while循环 - 您不需要它，因为setInterval函数本身正在为您运行循环。但是，您需要将setInterval的返回值保存在变量中，以便在达到停止条件时将其清除。简而言之，请详细了解setInterval：它与sleep完全不同。

setInterval定时器功能不起作用

2 个答案: