如何停止来自 HTML 的 "setInterval"

Question

这段代码展示了一个成长中的间隔计时器。我正在为此使用 setInterval，但我不知道如何停止 ist。

有一个叫做 ende() 的函数。我可以用这个功能停止 Intervaltimer 吗？

停止它的原因是当我再次按下按钮（在底部）时，第二个计时器启动。不知道怎么说，测试一下。

```
<!DOCTYPE html>
<html>
 <head>
  <title>Interval Timer</title>
 
  <style>
   @font-face {
    font-family: sevenSegment;
    src: url(SevenSegment.ttf);
   }
  
   h1{
    font-family: sevenSegment;
    font-size: 7em;
    color: #969696;
    line-height: 0%;
   }
   h2{
    font-family: sevenSegment;
    font-size: 5em;
    color: #969696;
    line-height: 0%;
   }

   .container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50% );
   }
   
   .button1{
    font-family: sevenSegment;
    font-size: 1em;
    color: #969696;
    
      border: none;
   }
  </style>

 </head>
 <body>
  <div class="container">


   <table>
     <tr>
      <td><h2 id="des">WORK</h2></td>       
     </tr>
     <tr>
       <td><h1 id="count">00:00:45</h1></th>
     </tr>
     <tr>
      <td><h2 id="des">REST</h2></td>
      </tr>
     <tr>
       <td><h1 id="count2">00:00:15</h1></td>
     </tr>
      <tr>
        <td><h2 id="des">Pause</h2></td>
      </tr>
      <tr>
        <td><h1 id="count3">00:00:25</h1></td>
      </tr>
   </table>
   <button class="button1" type="button" id="work">Work</button>
   <button class="button1" type="button" id="rest">Rest</button>
   <button class="button1" type="button" id="pause">Pause</button>
  </div>
  <script type="text/javascript">

   document.querySelector('#work').addEventListener('click', work);
   document.querySelector('#rest').addEventListener('click', rest);
   document.querySelector('#pause').addEventListener('click', pause);

   function work(argument) {
    var counter = 45;
    var status = 0;
 /*   function ende(argument) {
     
     if (){
      counter = 15;
     }
     if (){
      counter = 45;
     }
     if (){
      counter = 25;
     }
     if (){
      counter = "mal sehen";
     }
    }*/
    setInterval( function(){
     counter--;

     if (counter >= 10) {
      id = document.getElementById("count");
      id.innerHTML = "00:00:" + counter + "";
      if (counter <= 0) {
       ende(id);
      }
     }
     if (counter < 10){
      id = document.getElementById("count");
      id.innerHTML = "00:00:0" + counter + "";
      if (counter <= 0) {
       ende(id);
      }
     }

    }, 1000);
   }
   function rest(argument) {
    var counter = 15;
    var status = 0;
 /*   function ende(argument) {
     
     if (){
      counter = 15;
     }
     if (){
      counter = 45;
     }
     if (){
      counter = 25;
     }
     if (){
      counter = "mal sehen";
     }
    }*/
    setInterval( function(){
     counter--;

     if (counter >= 10) {
      id = document.getElementById("count2");
      id.innerHTML = "00:00:" + counter + "";
      if (counter <= 0) {
       ende(id);
      }
     }
     if (counter < 10){
      id = document.getElementById("count2");
      id.innerHTML = "00:00:0" + counter + "";
      if (counter <= 0) {
       ende(id);
      }
     }

    }, 1000);
   }
   function pause(argument) {
    var counter = 25;
    var status = 0;
 /*   function ende(argument) {
     
     if (){
      counter = 15;
     }
     if (){
      counter = 45;
     }
     if (){
      counter = 25;
     }
     if (){
      counter = "mal sehen";
     }
    }*/
    setInterval( function(){
     counter--;

     if (counter >= 10) {
      id = document.getElementById("count3");
      id.innerHTML = "00:00:" + counter + "";
      if (counter <= 0) {
       ende(id);
      }
     }
     if (counter < 10){
      id = document.getElementById("count3");
      id.innerHTML = "00:00:0" + counter + "";
      if (counter <= 0) {
       ende(id);
      }
     }

    }, 1000);
   }
   function ende(id){
    id.innerHTML = "00:00:00"
   }
  </script>
 </body>
</html>

间隔计时器

    <style>
        @font-face {
            font-family: sevenSegment;
            src: url(SevenSegment.ttf);
        }

        h1{
            font-family: sevenSegment;
            font-size: 7em;
            color: #969696;
            line-height: 0%;
        }
        h2{
            font-family: sevenSegment;
            font-size: 5em;
            color: #969696;
            line-height: 0%;
        }

        .container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50% );
        }

        .button1{
            font-family: sevenSegment;
            font-size: 1em;
            color: #969696;

            border: none;
        }
    </style>

</head>
<body>
    <div class="container">


        <table>
          <tr>
            <td><h2 id="des">WORK</h2></td>             
          </tr>
          <tr>
            <td><h1 id="count">00:00:45</h1></th>
          </tr>
          <tr>
            <td><h2 id="des">REST</h2></td>
           </tr>
          <tr>
            <td><h1 id="count2">00:00:15</h1></td>
          </tr>
           <tr>
             <td><h2 id="des">Pause</h2></td>
           </tr>
           <tr>
             <td><h1 id="count3">00:00:25</h1></td>
           </tr>
        </table>
        <button class="button1" type="button" id="work">Work</button>
        <button class="button1" type="button" id="rest">Rest</button>
        <button class="button1" type="button" id="pause">Pause</button>
    </div>
    <script type="text/javascript">

        document.querySelector('#work').addEventListener('click', work);
        document.querySelector('#rest').addEventListener('click', rest);
        document.querySelector('#pause').addEventListener('click', pause);

        function work(argument) {
            var counter = 45;
            var status = 0;
/*          function ende(argument) {

                if (){
                    counter = 15;
                }
                if (){
                    counter = 45;
                }
                if (){
                    counter = 25;
                }
                if (){
                    counter = "mal sehen";
                }
            }*/
            setInterval( function(){
                counter--;

                if (counter >= 10) {
                    id = document.getElementById("count");
                    id.innerHTML = "00:00:" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }
                if (counter < 10){
                    id = document.getElementById("count");
                    id.innerHTML = "00:00:0" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }

            }, 1000);
        }
        function rest(argument) {
            var counter = 15;
            var status = 0;
/*          function ende(argument) {

                if (){
                    counter = 15;
                }
                if (){
                    counter = 45;
                }
                if (){
                    counter = 25;
                }
                if (){
                    counter = "mal sehen";
                }
            }*/
            setInterval( function(){
                counter--;

                if (counter >= 10) {
                    id = document.getElementById("count2");
                    id.innerHTML = "00:00:" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }
                if (counter < 10){
                    id = document.getElementById("count2");
                    id.innerHTML = "00:00:0" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }

            }, 1000);
        }
        function pause(argument) {
            var counter = 25;
            var status = 0;
/*          function ende(argument) {

                if (){
                    counter = 15;
                }
                if (){
                    counter = 45;
                }
                if (){
                    counter = 25;
                }
                if (){
                    counter = "mal sehen";
                }
            }*/
            setInterval( function(){
                counter--;

                if (counter >= 10) {
                    id = document.getElementById("count3");
                    id.innerHTML = "00:00:" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }
                if (counter < 10){
                    id = document.getElementById("count3");
                    id.innerHTML = "00:00:0" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }

            }, 1000);
        }
        function ende(id){
            id.innerHTML = "00:00:00"
        }
    </script>
</body>

Answer 1

将间隔存储在变量中，然后使用该变量停止间隔。但是，由于您是在一个函数内启动间隔并在另一个函数内停止它，因此您需要使用全局变量。首先声明一个全局变量x:

var x;

然后，替换：

setInterval(...

作者：

x = setInterval(...

要停止间隔，只需调用

clearInterval(x);

如何停止来自 HTML 的 "setInterval"

How to stop an "setInterval" from HTML

javascript

html

time

countdown