js clearInterval()方法的定义和用法

川长思鸟来 2022-06-13 06:30 305阅读 0赞

clearInterval()方法能够取消setInterval()方法设置的定时器，本文给大家详解clearInterval()方法的定义和用法，感兴趣的朋友参考下。

此方法能够取消[setInterval()方法][setInterval]设置的定时器。

此方法的参数必须是要取消相应的[setInerval()方法][setInterval]的返回值。

点击可参阅更多[window对象的属性和方法][window]。

**语法结构:**

clearInterval(id)

**参数列表:**

<table style="border-collapse:collapse; border-spacing:0px; border:1px solid rgb(227,237,245); text-align:center; margin-top:0.54em; clear:both; width:756px; font-size:12px; line-height:19px; font-family:Tahoma,&quot;Microsoft Yahei&quot;,Simsun; word-wrap:break-word; empty-cells:show; table-layout:auto; color:rgb(68,68,68)"> 
 <tbody style="word-wrap:break-word"> 
  <tr style="background-color:rgb(214,214,214); word-wrap:break-word"> 
   <td style="margin:0px; padding:4px; border:1px solid rgb(227,237,245); word-wrap:break-word; font-size:14px; overflow:hidden"> <span style="line-height:25.2px; word-wrap:break-word">参数</span></td> 
   <td style="margin:0px; padding:4px; border:1px solid rgb(227,237,245); word-wrap:break-word; font-size:14px; overflow:hidden"> <span style="line-height:25.2px; word-wrap:break-word">描述</span></td> 
  </tr> 
  <tr style="background-color:rgb(247,247,247); word-wrap:break-word"> 
   <td style="margin:0px; padding:4px; border:1px solid rgb(227,237,245); word-wrap:break-word; font-size:14px; overflow:hidden"> <span style="line-height:25.2px; word-wrap:break-word">id</span></td> 
   <td style="margin:0px; padding:4px; border:1px solid rgb(227,237,245); word-wrap:break-word; font-size:14px; overflow:hidden"> <span style="line-height:25.2px; word-wrap:break-word">必需。此id是setInerval()的返回值，是此setInerval()方法的唯一标识。</span></td> 
  </tr> 
 </tbody> 
</table>

**浏览器支持:**

（1）.IE浏览器支持此属性。  
（2）.Firefox浏览器支持此属性。  
（3）.Opera浏览器支持此属性。  
（4）.chrome浏览器支持此属性。  
（5）.safria浏览器支持此方法。

**代码实例:**

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8"/>
    <meta name="author" content="http://www.softwhy.com/" />
    <title>window对象的clearInterval()方法 -蚂蚁部落</title>
    <style type="text/css">
    #num{
     width:100px;
     height:100px;
     text-align:center;
     line-height:100px;
     background-color:green;
     margin:50px auto 0px auto;
     color:red;
    }
    #btdiv{
     width:76px;
     height:76px;
     margin:0px auto;
    }
    </style>
    <script type="text/javascript">
    var a=0;
    window.οnlοad=function(){
     var num=document.getElementById("num");
     var bt=document.getElementById("bt");
     function jisuan(){
     num.innerHTML=a;
     a=a+1;
     }
     var flag=setInterval(jisuan,1000);
     bt.οnclick=function(){
     clearInterval(flag);
     }
    }
    </script>
    </head>
    <body>
    <div id="num"></div>
    <div id="btdiv"><button id="bt">点击取消</button></div>
    </body>
    </html>

以上代码点击按钮可以取消数字自增效果。

[setInterval]: http://www.jb51.net/article/74672.htm
[window]: http://www.jb51.net/article/74678.htm