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（）继续运行，即使使用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没有停止

4 个答案: