JS定時器和函式
阿新 • • 發佈:2018-12-28
一個簡單的回撥函式使用
- 單次定時器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);