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

來源:互聯網
上載者:User

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 表示由 setInterval() 返回的 ID 值。

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('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>

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

文法 clearTimeout(id_of_settimeout)

參數 id_of_setinterval 表示由 setTimeout() 返回的 ID 值。該值標識要取消的順延強制代碼塊。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.