JavaScript setInterval 没有停止

Question

我正在使用 setInterval() 运行设置 JavaScript 计时器。我想运行定时器 5 秒，然后从零秒重新启动定时器，同样的过程应该运行 3 次。

<!DOCTYPE html>
<html>
<head>
    <title>Jquery setinterval stop after sometime</title>
</head>
<body>

    <p>Counter: <span id="counter"></span></p>
    <p>Seconds: <span id="seconds"></span></p>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            var start_secs;
            var counter = 0;
            function intervalFunc(){
                var seconds = 0;
                $('#counter').html(counter);
                start_secs = setInterval(function(){
                    $('#seconds').html(seconds);
                    if(seconds===5){
                        if(counter < 3){
                            intervalFunc();
                        }else{
                            console.log('else');
                            clearInterval(start_secs);
                            seconds=0;
                            return false;
                        }
                    }
                    seconds++;  
                }, 1000);
                counter++;
            }

            intervalFunc();
        });
    </script>


</body>

上面的代码计时器在 counter 值小于 3 之前工作正常，但在那之后 setInterval() 保持运行ning 并且即使在使用 clearInterval() 时也不会停止。

谁能指出给定代码中的问题，即为什么 setInterval() 在 counter 值大于或等于 3 后没有停止？

Answer 1

在调用 intervalFunc() 之前，您必须清除之前的计时器。因为每个定时器都分配给同一个变量，所以定时器在后台运行，然后没有办法清除那些定时器。

检查代码的变化：

<!DOCTYPE html>
<html>
<head>
    <title>Jquery setinterval stop after sometime</title>
</head>
<body>

    <p>Counter: <span id="counter"></span></p>
    <p>Seconds: <span id="seconds"></span></p>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            var start_secs;
            var counter = 0;
            function intervalFunc(){
                var seconds = 0;
                $('#counter').html(counter);
                start_secs = setInterval(function(){
                    $('#seconds').html(seconds);
                    if(seconds===5){
                        clearInterval(start_secs);
                        if(counter < 3){
                            intervalFunc();
                        }else{
                            console.log('else');
                            seconds=0;
                            return false;
                        }
                    }
                    seconds++;  
                }, 1000);
                counter++;
            }

            intervalFunc();
        });
    </script>


</body>

Answer 2

有一些问题。最主要的是 start_seconds 需要在函数本地，而不是在函数外部声明——您希望在函数内独立控制每个间隔。你拥有它的方式，你失去了对早期计时器的引用。而你要清空时seconds == 5不管是否counter < 3因为你是开始新的

像这样：

var counter = 0;
function intervalFunc(){
    var seconds = 0
    var start_secs = setInterval(function(){
        console.log(seconds)
        if(seconds===5){
            if(counter < 3){
                intervalFunc();
            }
            // after 5 times clear the interval
            // a new one is started if counter < 3
            clearInterval(start_secs);
            return            
        }
        seconds++;  
    }, 500);
    counter++;
}

intervalFunc();

Answer 3

您只需调用 setInterval 一次，因为它会在您停止之前继续运行。

$(document).ready(function() {
  var start_secs;
  var counter = 0;
  var seconds = 0;

  function intervalFunc() {
    if (seconds === 5) {
      seconds = 0;
      counter++;
      if (counter == 3) {
        // seconds = 5; // uncomment to show 5 instead of 0 when finished
        clearInterval(start_secs);
        console.log('Finish');
      }
    }
    else {
      seconds++;
    }
    $('#seconds').html(seconds);
    $('#counter').html(counter);
  }

  start_secs = setInterval(intervalFunc, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Counter: <span id="counter">0</span></p>
<p>Seconds: <span id="seconds">0</span></p>

Answer 4

正如您在前面的回答后现在可能知道的那样，您多次调用 setInterval 从而创建了许多无法清除的间隔。当您在其中再次调用 intervalFunc 时，它会通过 setInterval 行并设置另一个 Interval。因此创建许多间隔，直到计数器达到 5 并在调节失败后仅清除一个间隔。这是经过测试的代码，可以毫无问题地执行此操作：

      $(document).ready(function() {
          var start_secs;
          var counter = 0;
          var seconds = 0;
          $('#counter').html(counter);
          $('#seconds').html(seconds);
          function increaseCounter(){
            counter+=1;
            $('#counter').html(counter);
          }

          var start_secs = setInterval(function(){
                  if(seconds==5){
                      seconds=0;
                      if(counter < 3){
                          increaseCounter();
                      }
                      else if(counter==3){
                          counter=0;
                          seconds=0;
                          $('#counter').html(counter);
                          $('#seconds').html(seconds);
                          clearInterval(start_secs);
                      }
                  }
                  $('#seconds').html(seconds);
                  seconds+=1;
              }, 1000);
      });

经过测试，它正在运行。我希望它对你有用...

JavaScript setInterval 没有停止

JavaScript setInterval is not stoping

javascript

jquery

setinterval

clearinterval