首頁 > web前端 > js教程 > JavaScript中停止執行setInterval和setTimeout事件的方法

JavaScript中停止執行setInterval和setTimeout事件的方法

高洛峰
發布: 2017-02-08 16:02:00
原創
1191 人瀏覽過

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

js 程式碼中執行循環事件時,經常會用到setInterval 和setTimeout 這兩個方法,關於這兩個方法的細節這裡不詳細討論了,簡要分享下在需要停止循環事件的時候該如何操作。

(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 表示由 Interval 傳回的值。

clearInterval() 方法可取消由 setInterval() 設定的 timeout;clearInterval() 方法的參數必須是由 setInterval() 傳回的 ID 值。

(2)setTimeout 方法用於在指定的毫秒數後呼叫函數或計算表達式。停止此方法可使用 clearTimeout 方法。具體範例如下:

提示:setTimeout() 只執行 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(&#39;txt&#39;).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>
登入後複製


clearTimeout() 方法可取消由 setTimeout() 方法設定的 timeout。

語法 clearTimeout(id_of_settimeout)

參數 id_of_setinterval 表示由 setTimeout() 傳回的 ID 值。該值標識要取消的延遲執行程式碼區塊。

更多JavaScript中停止執行setInterval和setTimeout事件的方法相關文章請關注PHP中文網!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板