JS中setInterval()和clearInterval()的使用以及注意事項

遠(yuǎn)方 2019-10-09

展開全文

setInterval()：間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼，定時器

clearInterval()：用于停止 setInterval() 方法執(zhí)行的函數(shù)代碼

使用方法：setInterval(code，millisec)，兩個參數(shù)都是必須的，第一個參數(shù)為要調(diào)用的函數(shù)或要執(zhí)行的代碼串。第二個參數(shù)為周期性執(zhí)行或調(diào)用 code 之間的時間間隔，以毫秒計。

clearInterval(id_of_setinterval)，參數(shù)是必須的，為setInterval返回的ID值

示例：

<body>
		<button onclick="start()">按鈕一</button>
		<button onclick="stop()">按鈕二</button>
		<script type="text/javascript">
			var interval = null;//計時器
			var i = 0;
			function start(){//啟動計時器函數(shù)
				if(interval!=null){//判斷計時器是否為空
					clearInterval(interval);
					interval=null;
				}
				interval = setInterval(overs,1000);//啟動計時器，調(diào)用overs函數(shù)，
			}
			function overs(){
				i++;
				console.log(i);	
			}
			function stop(){
				clearInterval(interval);
				interval = null;
			}
		</script>
	</body>

在使用setInterval方法時，每一次啟動都需要對setInterval方法返回的值做一個判斷，判斷是否是空值，若不是空值，則要停止定時器并將值設(shè)為空，再重新啟動，如果不進(jìn)行判斷并賦值，有可能會造成計時器循環(huán)調(diào)用，在同等的時間內(nèi)同時執(zhí)行調(diào)用的代碼，并會隨著代碼的運行時間增加而增加，導(dǎo)致功能無法實現(xiàn)，甚至占用過多資源而卡死奔潰。因此在每一次使用setInterval方法時，都需要進(jìn)行一次判斷。