JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法

更新時間：2015年05月14日 09:15:57 投稿：junjie

這篇文章主要介紹了JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法,本文給出操作實例代碼和語法介紹,需要的朋友可以參考下

js 代碼中執(zhí)行循環(huán)事件時，經常會用到 setInterval 和 setTimeout 這兩個方法，關于這兩個方法的細節(jié)這里不詳細討論了，簡要分享下在需要停止循環(huán)事件的時候該如何操作。

（1）setInterval 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式，停止該方法可使用 clearInterval 方法。具體示例如下：

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<input type="text" id="clock" size="50" />

<script language=javascript>

var int=self.setInterval("clock()",50);//每隔 50 毫秒調用 clock() 函數

function clock(){

 var t=new Date();

 document.getElementById("clock").value=t;

}

</script>

<button onclick="window.clearInterval(int)">停止 interval</button>

</body>

</html>

語法 clearInterval(id_of_setinterval)

參數 id_of_setinterval 表示由 setInterval() 返回的 ID 值。

clearInterval() 方法可取消由 setInterval() 設置的 timeout；clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。

（2）setTimeout 方法用于在指定的毫秒數后調用函數或計算表達式。停止該方法可使用 clearTimeout 方法。具體示例如下：

提示：setTimeout() 只執(zhí)行 code 一次。如果要多次調用，請使用 setInterval() 或者讓 code 自身再次調用 setTimeout()。

復制代碼代碼如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">

var c=0;

var t;

function timedCount(){

 document.getElementById('txt').value=c;

 c=c+1;

 t=setTimeout("timedCount()",1000);

}

function stopCount(){

 clearTimeout(t);

}

</script>

</head>

<body>

<input type="button" value="開始計數" onClick="timedCount()">

<input type="text" id="txt">

<input type="button" value="停止計數" onClick="stopCount()">

</body>

</html>