事件流逝觸發的事件

這類事件不是基于用戶針對可見Web頁面元素執行的行為，而是基于時間的流逝。
和JavaScript中所有其他事件一樣，這些時間流逝事件也是由函數處理的。

---

setTimeout()

撿重點說了

• setTimeout允許添加更多的參數。它們將被傳入推遲執行的函數

  setTimeout(function(a,b){alert(a+b);},1000,2,5) // 7

  IE9以下不支持更多的參數，可以用apply或bind實現

---

• 被setTimeout推遲執行的回調函數是在全局環境執行，這有可能不同于函數定義時的上下文環境。

var x = 1;var o = {x: 2,y:function(){console.log(this.x);}};setTimeout(o.y,1000); // 1// 另一個例子function User(login) {this.login = login;this.sayHi = function() {console.log(this.login);}}var user = new User('John'); setTimeout(user.sayHi, 1000);

this.login會報錯，因為取不到值。

一種解決方法是將user.sayHi放在函數作用域內執行，而不是在全局作用域中。

setTimeout(function(){user.sayHi();}, 1000); // "John"

另一種方法，就是采用閉包，將this與當前作用域綁定。

document.getElementById('click-ok').onclick = function() {var self = this;setTimeout(function() { self.value='OK';}, 100);}// setTimeout指定的函數中的this，總是指向定義時所在的DOM節點。

---

setInterval()

setInterval指定某個任務每隔一段時間就執行一次，也就是無限次的定時執行。

<button onclick="clearInterval(time)">Stop!</button><script type="text/javascript">var counter = 0;var time = setInterval(function() {console.log(counter);counter++;},2000)

簡易計數器，直到用戶點擊按鈕

function f() {for (var i=0;i<arguments.length;i++) {console.log(arguments[i]+" | "+arguments.length);}};setInterval(f,1000,1,2,3);// "1 | 3"// "2 | 3"// "3 | 3"

與setTimeout一樣，除了前兩個參數，setInterval 方法還可以接受更多的參數，它們會傳入回調函數

待.......

• 定時器

• 關于setInterval()和setTimeout()返回值

• 關于setInterval()你所不知道的地方

總結

以上是生活随笔為你收集整理的JS setTimeout 与 setInterval的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。