JavaScript 定時器 取消定時器

感謝：鏈接（視頻講解很清晰）

定時器：作用主要是一定時間間隔后，做出相關的變化，例如圖片輪播。

---

目錄

兩種定時器的使用

兩種定時器區別

取消定時器的方法

---

兩種定時器的使用：

方法一：setTimeout

·1、用法：

<script type="text/javascript">
	setTimeout(dosth,1000); //包含兩個變量，前面為要調用的函數，后面為間隔的時長（ms為單位）
</script>

2、樣例：間隔兩秒后彈窗一次

<script type="text/javascript">
	setTimeout(function(){
		alert("時間到啦");
	},1000);
</script>

運行截圖:

方法二：setInterval

樣例：每間隔兩秒調試台輸出一次

<script type="text/javascript">
	setInterval(function(){
		alert("時間又到啦");
	},1000);
</script>

運行截圖:

 

兩種定時器區別：

程序代碼：

<script type="text/javascript">
	setTimeout(function(){
		console.log("這是第一種定時器");//第一種定時器只能使用一次
	},1000);
	setInterval(function(){
		console.log("這是第二種定時器"); //第二種定時器可以使用多次
	},1000);
</script>

調試台運行截圖：（可以看出來setTimeout只能使用一次，setInterval可以使用多次）

取消定時器的方法

1、clearInterval

<script type="text/javascript">
	var al=function(){
		console.log("hello");
	}
	var ni=setInterval(al,1000);
	clearInterval(ni);//括號中必須添加定時器的名稱
</script>

2、調控台截圖(可以看到調用函數后不再調用al函數（定時器停止）)