setInterval计时器功能不起作用

Question

I'm making a countdown timer. When I take out the setInterval() function, and decrement the time without pausing, the program works correctly.

But when I use the setInterval() function to call the code that decrements my time only every second, the program hangs.

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

You add while and it looping very fast, so you setInterval() calling many times, so browser hanging. You don't need to while, because setInterval run every time that defined in setInterval second parameter. You can use following code:

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

You appear to be conflating the asynchronous setInterval function with a synchronous sleep kind of function. They are totally different. The setInterval function sets a timer for you. It says, "run function x every y milliseconds". But here, you are setting that function umpteen different times in that while loop. Essentially, you start setting off more and more timers, hundreds or thousands of them, each one running the decreaseTime function every 1 second, until the program hangs.

What you want to do is put the setInterval function at the top level of your program, and have it run the timeControl function every 1000 ms. Remove the while loop from the timeControl function -- you don't need it since the setInterval function itself is running a loop for you. However, you will need to save the return value of setInterval in a variable so that you can clear it when your stop condition is reached. In short, read more about setInterval : it's a totally different concept from sleep .