定時(shí)器

參考鏈接

setTimeout()

console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);

上面代碼的輸出結(jié)果就是1，3，2，因?yàn)閟etTimeout指定第二行語句推遲1000毫秒再執(zhí)行。

為了便于javascript引擎優(yōu)化代碼，setTimeout方法一般總是采用函數(shù)名的形式，就像下面這樣

function f(){
  console.log(2);
}

setTimeout(f,1000);

// 或者

setTimeout(function (){console.log(2)},1000);

除了前兩個(gè)參數(shù)，setTimeout還允許添加更多的參數(shù)。它們將被傳入推遲執(zhí)行的函數(shù)。

setTimeout(function(a,b){
  console.log(a+b);
},1000,1,1);

上面代碼中，setTimeout共有4個(gè)參數(shù)。最后那兩個(gè)參數(shù)，將在1000毫秒之后回調(diào)函數(shù)執(zhí)行時(shí)，作為回調(diào)函數(shù)的參數(shù)。

除了參數(shù)問題，setTimeout還有一個(gè)需要注意的地方：被setTimeout推遲執(zhí)行的回調(diào)函數(shù)是在全局環(huán)境執(zhí)行，這有可能不同于函數(shù)定義時(shí)的上下文環(huán)境。

var x = 1;

var o = {
    x: 2,
    y: function(){
    console.log(this.x);
  }
};

setTimeout(o.y,1000);
// 1

再看一個(gè)不容易發(fā)現(xiàn)錯(cuò)誤的例子。

function User(login) {
  this.login = login;
  this.sayHi = function() {
    console.log(this.login);
  }
}
var user = new User('John');
setTimeout(user.sayHi, 1000);

上面代碼只會(huì)顯示undefined，因?yàn)榈鹊絬ser.sayHi執(zhí)行時(shí)，它是在全局對(duì)象中執(zhí)行，所以this.login取不到值。

為了防止出現(xiàn)這個(gè)問題，一種解決方法是將user.sayHi放在函數(shù)中執(zhí)行。

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

上面代碼中，user.sayHi是在函數(shù)作用域內(nèi)執(zhí)行，而不是在全局作用域內(nèi)執(zhí)行，所以能夠顯示正確的值。

另一種更通用的解決方法，則是采用閉包，將this與當(dāng)前運(yùn)行環(huán)境綁定。

document.getElementById('click-ok').onclick = function() {
  var self = this;
  setTimeout(function() { 
    self.value='OK';
  }, 100);
}

上面代碼中，setTimeout指定的函數(shù)中的this，總是指向定義時(shí)所在的DOM節(jié)點(diǎn)。

第三種：箭頭函數(shù)

function User(login) {
  this.login = login;
  this.sayHi = () => console.log(this.login);
}
var user = new User('John');
setTimeout(user.sayHi, 1000);

setInterval()

setInterval指定的是開始執(zhí)行之間的間隔，因此實(shí)際上兩次執(zhí)行之間的間隔會(huì)小于setInterval指定的時(shí)間。
假定setInterval指定每100毫秒執(zhí)行一次，每次執(zhí)行需要5毫秒，那么第一次執(zhí)行結(jié)束后95毫秒，第二次執(zhí)行就會(huì)開始。
如果某次執(zhí)行耗時(shí)特別長，比如需要105毫秒，那么它結(jié)束后，下一次執(zhí)行就會(huì)立即開始。

假設(shè)，某個(gè)onclick事件處理程序使用啦setInterval()來設(shè)置了一個(gè)200ms的重復(fù)定時(shí)器。如果事件處理程序花了300ms多一點(diǎn)的時(shí)間完成。
這個(gè)例子中的第一個(gè)定時(shí)器是在205ms處添加到隊(duì)列中，但是要過300ms才能執(zhí)行。在405ms又添加了一個(gè)副本。在一個(gè)間隔，605ms處，第一個(gè)定時(shí)器代碼還在執(zhí)行中，而且隊(duì)列中已經(jīng)有了一個(gè)定時(shí)器實(shí)例，結(jié)果是605ms的定時(shí)器代碼不會(huì)添加到隊(duì)列中。結(jié)果是在5ms處添加的定時(shí)器代碼執(zhí)行結(jié)束后，405處的代碼立即執(zhí)行。

setInterval(function() {
  console.log(2);
}, 1000);

(function() {
  sleeping(3000);
})();

上面的第一行語句要求每隔1000毫秒就輸出一個(gè)2.但是，第二行語句需要3000毫秒才能完成，請(qǐng)問會(huì)發(fā)生什么結(jié)果？

結(jié)果就是等到第二行語句運(yùn)行完成以后，立刻連續(xù)輸出三個(gè)2，然后開始每隔1000毫秒輸出一個(gè)2。

也就是說，setInterval具有累積效應(yīng)，如果某個(gè)操作特別耗時(shí)，超過了setInterval的時(shí)間間隔，排在后面的操作會(huì)被累積起來，然后在很短的時(shí)間內(nèi)連續(xù)觸發(fā)，這可能或造成性能問題（比如集中發(fā)出Ajax請(qǐng)求）。

為了確保兩次執(zhí)行之間有固定的間隔，可以不用setInterval，而是每次執(zhí)行結(jié)束后，使用setTimeout指定下一次執(zhí)行的具體時(shí)間。上面代碼用setTimeout，可以使用下面的這種方法:

var timer = setTimeout(function(){
    //do something
    timer = setTimeout(arguments.callee, interval);
}, interval)

arguments.callee 指向此參數(shù)的函數(shù)

上面實(shí)現(xiàn)了遞歸調(diào)用，這樣做的好處是：在前一個(gè)定時(shí)器代碼執(zhí)行完成之前，不會(huì)向隊(duì)列插入新的定時(shí)代碼，確保不會(huì)有任何的缺失間隔。而且，它保證在下一次定時(shí)器代碼執(zhí)行之前，至少要等待指定的時(shí)間間隔。

根據(jù)這種思路，可以自己部署一個(gè)函數(shù)，實(shí)現(xiàn)間隔時(shí)間確定的setInterval的效果。

function interval(func, wait){
  var interv = function(w){
    return function(){
      setTimeout(interv, w);
      func.call(null);
    }
  }(wait);

  setTimeout(interv, wait);
}

interval(function(){
  console.log(2);
},1000);

上面代碼部署了一個(gè)interval函數(shù)，用循環(huán)調(diào)用setTimeout模擬了setInterval。

setTimeout(f,0)

必須要等到當(dāng)前腳本的同步任務(wù)和“任務(wù)隊(duì)列”中已有的事件，全部處理完以后，才會(huì)執(zhí)行setTimeout指定的任務(wù)。
setTimeout添加的事件，會(huì)在下一次Event Loop執(zhí)行。

setTimeout(f,0)將第二個(gè)參數(shù)設(shè)為0，作用是讓f在現(xiàn)有的任務(wù)（腳本的同步任務(wù)和“任務(wù)隊(duì)列”中已有的事件）一結(jié)束就立刻執(zhí)行。也就是說，setTimeout(f,0)的作用是，盡可能早地執(zhí)行指定的任務(wù)。

setTimeout(function() {
  console.log("Timeout");
}, 0);

function a(x) {
    console.log("a() 開始運(yùn)行");
    b(x);
    console.log("a() 結(jié)束運(yùn)行");
}

function b(y) {
    console.log("b() 開始運(yùn)行");
    console.log("傳入的值為" + y);
    console.log("b() 結(jié)束運(yùn)行");
}

console.log("當(dāng)前任務(wù)開始");
a(42);
console.log("當(dāng)前任務(wù)結(jié)束");

// 當(dāng)前任務(wù)開始
// a() 開始運(yùn)行
// b() 開始運(yùn)行
// 傳入的值為42
// b() 結(jié)束運(yùn)行
// a() 結(jié)束運(yùn)行
// 當(dāng)前任務(wù)結(jié)束
// Timeout

0毫秒實(shí)際上達(dá)不到的。根據(jù)HTML 5標(biāo)準(zhǔn)，setTimeOut推遲執(zhí)行的時(shí)間，最少是4毫秒。如果小于這個(gè)值，會(huì)被自動(dòng)增加到4。另一方面，瀏覽器內(nèi)部使用32位帶符號(hào)的整數(shù)，來儲(chǔ)存推遲執(zhí)行的時(shí)間。這意味著setTimeout最多只能推遲執(zhí)行2147483647毫秒（24.8天），超過這個(gè)時(shí)間會(huì)發(fā)生溢出，導(dǎo)致回調(diào)函數(shù)將在當(dāng)前任務(wù)隊(duì)列結(jié)束后立即執(zhí)行，即等同于setTimeout(f,0)的效果。

應(yīng)用

setTimeout(f,0)有幾個(gè)非常重要的用途。它的一大應(yīng)用是，可以調(diào)整事件的發(fā)生順序。比如，網(wǎng)頁開發(fā)中，某個(gè)事件先發(fā)生在子元素，然后冒泡到父元素，即子元素的事件回調(diào)函數(shù)，會(huì)早于父元素的事件回調(diào)函數(shù)觸發(fā)。如果，我們先讓父元素的事件回調(diào)函數(shù)先發(fā)生，就要用到setTimeout(f, 0)。

var input = document.getElementsByTagName('input[type=button]')[0];

input.onclick = function A() {
  setTimeout(function B() {
    input.value +=' input'; 
  }, 0)
};

document.body.onclick = function C() {
  input.value += ' body'
};

用戶自定義的回調(diào)函數(shù)，通常在瀏覽器的默認(rèn)動(dòng)作之前觸發(fā)。比如，用戶在輸入框輸入文本，keypress事件會(huì)在瀏覽器接收文本之前觸發(fā)。因此，下面的回調(diào)函數(shù)是達(dá)不到目的的。

document.getElementById('input-box').onkeypress = function(event) {
  this.value = this.value.toUpperCase();
}

上面代碼想在用戶輸入文本后，立即將字符轉(zhuǎn)為大寫。但是實(shí)際上，它只能將上一個(gè)字符轉(zhuǎn)為大寫，因?yàn)闉g覽器此時(shí)還沒接收到文本，所以this.value取不到最新輸入的那個(gè)字符。只有用setTimeout改寫，上面的代碼才能發(fā)揮作用。

document.getElementById('my-ok').onkeypress = function() {
  var self = this;
  setTimeout(function() {
    self.value = self.value.toUpperCase();
  }, 0);
}

上面代碼將代碼放入setTimeout之中，就能使得它在瀏覽器接收到文本之后觸發(fā)。

由于setTimeout(f,0)實(shí)際上意味著，將任務(wù)放到瀏覽器最早可得的空閑時(shí)段執(zhí)行，所以那些計(jì)算量大、耗時(shí)長的任務(wù)，常常會(huì)被放到幾個(gè)小部分，分別放到setTimeout(f,0)里面執(zhí)行。

var div = document.getElementsByTagName('div')[0];

// 寫法一
for(var i=0xA00000;i<0xFFFFFF;i++) {
  div.style.backgroundColor = '#'+i.toString(16);
}

// 寫法二
var timer;
var i=0x100000;

function func() {
  timer = setTimeout(func, 0);
  div.style.backgroundColor = '#'+i.toString(16);
  if (i++ == 0xFFFFFF) clearInterval(timer);
}

timer = setTimeout(func, 0);

上面代碼有兩種寫法，都是改變一個(gè)網(wǎng)頁元素的背景色。寫法一會(huì)造成瀏覽器“堵塞”，而寫法二就能就不會(huì)，這就是setTimeout(f,0)的好處。

相關(guān)測(cè)試

下面各段代碼輸出什么？

for (var i = 0; i < 5; i++) {
  console.log(i);
}

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);
}

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

for (var i = 0; i < 5; i++) {
  (function() {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

for (var i = 0; i < 5; i++) {
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}

setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function executor(resolve) {
  console.log(2);
  for( var i=0 ; i<10000 ; i++ ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);

1. 直接輸出 0 1 2 3 4

2. 輸出一個(gè) 5，然后每隔一秒再輸出一個(gè) 5，一共 5 個(gè) 5

3. 每隔一秒輸出 0 1 2 3 4

4. 每隔一秒輸出 5 5 5 5 5；
   這樣子的話，內(nèi)部其實(shí)沒有對(duì) i 保持引用，其實(shí)會(huì)變成輸出 5。

5. 立馬輸出 0 到 4；
   給 setTimeout 傳遞了一個(gè)立即執(zhí)行函數(shù)。setTimeout 可以接受函數(shù)或者字符串作為參數(shù)，那么這里立即執(zhí)行函數(shù)是個(gè)啥呢，應(yīng)該是個(gè) undefined ，也就是說等價(jià)于：
   setTimeout(undefined, ...);
   而立即執(zhí)行函數(shù)會(huì)立即執(zhí)行，那么應(yīng)該是立馬輸出的。

6. 輸出 2 3 5 4 1