JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法
js 代碼中執(zhí)行循環(huán)事件時(shí)，經(jīng)常會(huì)用到 setInterval 和 setTimeout 這兩個(gè)方法，關(guān)于這兩個(gè)方法的細(xì)節(jié)這里不詳細(xì)討論了，簡(jiǎn)要分享下在需要停止循環(huán)事件的時(shí)候該如何操作。
（1）setInterval 方法可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式，停止該方法可使用 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 毫秒調(diào)用 clock() 函數(shù)
function clock(){
var t=new Date();
document.getElementById("clock").value=t;
}
</script>
<button onclick="window.clearInterval(int)">停止 interval</button>
</body>
</html>
語(yǔ)法 clearInterval(id_of_setinterval)
參數(shù) id_of_setinterval 表示由 setInterval() 返回的 ID 值。
clearInterval() 方法可取消由 setInterval() 設(shè)置的 timeout；clearInterval() 方法的參數(shù)必須是由 setInterval() 返回的 ID 值。
（2）setTimeout 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。停止該方法可使用 clearTimeout 方法。具體示例如下：
提示：setTimeout() 只執(zhí)行 code 一次。如果要多次調(diào)用，請(qǐng)使用 setInterval() 或者讓 code 自身再次調(diào)用 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="開(kāi)始計(jì)數(shù)" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止計(jì)數(shù)" onClick="stopCount()">
</body>
</html>
clearTimeout() 方法可取消由 setTimeout() 方法設(shè)置的 timeout。
語(yǔ)法 clearTimeout(id_of_settimeout)
參數(shù) id_of_setinterval 表示由 setTimeout() 返回的 ID 值。該值標(biāo)識(shí)要取消的延遲執(zhí)行代碼塊。
- JavaScript SetInterval與setTimeout使用方法詳解
- JavaScript中SetInterval與setTimeout的用法詳解
- Js中setTimeout()和setInterval() 何時(shí)被調(diào)用執(zhí)行的用法
- javascript中SetInterval與setTimeout的定時(shí)器用法
- JavaScript定時(shí)器setTimeout()和setInterval()詳解
- js中的setInterval和setTimeout使用實(shí)例
- Javascript對(duì)象中關(guān)于setTimeout和setInterval的this介紹
- JavaScript中setTimeout和setInterval函數(shù)的傳參及調(diào)用
- JavaScript setTimeout和setInterval的使用方法 說(shuō)明
- JavaScript?setTimeout和setInterval的用法與區(qū)別詳解
相關(guān)文章
Javascript設(shè)計(jì)模式之發(fā)布訂閱模式
發(fā)布---訂閱模式又叫觀察者模式，它定義了對(duì)象間的一種一對(duì)多的關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)主題對(duì)象，當(dāng)一個(gè)對(duì)象發(fā)生改變時(shí)，所有依賴于它的對(duì)象都將得到通知2022-12-12
js實(shí)現(xiàn)帶農(nóng)歷和八字等信息的日歷特效
本文主要介紹了js實(shí)現(xiàn)帶農(nóng)歷和八字等信息的日歷特效,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
JS 創(chuàng)建對(duì)象的模式實(shí)例小結(jié)
這篇文章主要介紹了JS 創(chuàng)建對(duì)象的模式,結(jié)合實(shí)例形式總結(jié)分析了JS 創(chuàng)建對(duì)象的各種常用模式,包括工廠模式、構(gòu)造函數(shù)模式、原型模式、組合構(gòu)造和原型模式、動(dòng)態(tài)原型模式、寄生構(gòu)造函數(shù)模式、穩(wěn)妥構(gòu)造模式等,需要的朋友可以參考下2020-04-04
canvas基礎(chǔ)繪制-絢麗倒計(jì)時(shí)的實(shí)例
下面小編就為大家?guī)?lái)一篇canvas基礎(chǔ)繪制-絢麗倒計(jì)時(shí)的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
使用Bootstrap框架制作查詢頁(yè)面的界面實(shí)例代碼
這篇文章主要介紹了使用Bootstrap框架制作查詢頁(yè)面界面的效果，本文以職業(yè)技能考證分?jǐn)?shù)查詢界面為例，通過(guò)實(shí)例代碼給大家詳細(xì)介紹,需要的朋友可以參考下2016-05-05
javascript的onchange事件與jQuery的change()方法比較
本來(lái)是想添加文本框文本內(nèi)容改變事件動(dòng)作的，結(jié)果找了許多這方面的javascript代碼都不如意。2009-09-09
用js實(shí)現(xiàn)彈出層效果，一般用于代替alert2008-03-03
這篇文章主要介紹了一文理解JavaScript裝飾器模式，文章基于JavaScript的相關(guān)資料展開(kāi)詳細(xì)介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)抽獎(jiǎng)的兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
如何實(shí)現(xiàn)小程序tab欄下劃線動(dòng)畫(huà)效果
這篇文章主要介紹了如何實(shí)現(xiàn)小程序tab欄下劃線動(dòng)畫(huà)效果,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05