1. 程式人生 > >JS定時器和函式

JS定時器和函式

一個簡單的回撥函式使用

  • 單次定時器setTimeout(),只能定時一次
啟動單次定時器:setTimeout(第一個引數是多少毫秒之後要呼叫的回撥函式,第二個引數是毫秒,1000ms等於1s)
<script>
	setTimeout(function(){
		document.write("2秒之後呼叫回撥函式");
	}, 2000);
</script>

或者這樣寫,將函式定義在外面

fnction demo(){
	console.log("3000ms後呼叫回撥函式");	
}
setTimeout(demo, 3000);

  • 多次定時器 setInterval(),迴圈定時器,間隔指定時間執行一次程式碼功能
每隔兩秒執行一次回撥函式;
var i = 0;
setInterval(function(){
	console.log(i);
	i++;
}, 2000);
  • 清除多次定時器 clearInterval(),用單次定時器等待多長時間後停止多次定時器
var i = 0;
var set = setInterval(function(){				//接收的set是定時器啟動的識別符號
	console.log(i);
	i++
}, 2000);

setTimeout(function(){
	clearInterval(set)		// 使用單次定時器讓上面的迴圈定時器執行三次之後
}, 6500);				// 清除迴圈定時器 clearInterval(要清除的定時器的識別符號)

或者在多次定時器內部當某個條件滿足時也可以清除定時器

/*定義一個div標籤,寬高都為50px;*/
<div id="item1" style="width: 50px; height: 50px; background: red;"></div>
/*通過id屬性獲取元素,並賦給變數odiv*/
var odiv = document.getElementById('item1)
var i = 50;
/*定時器啟動之後返回一個描述符並賦給變數set,描述符用於等會清除這個定時器*/
var set = setInterval(function(){
	i++;
	/*每隔50ms讓這個元素的寬高各增加1px;*/
	odiv.style.height=i+'px';
	odiv.style.width=i+'px';
	/*判斷 i 等於200的時候清除定時器*/
	if (i==200){
		clearInterval(set);
	};
}, 50);