摘要：重新認(rèn)識三如果被推遲執(zhí)行的回調(diào)函數(shù)是某個(gè)對象的方法，那么該方法中的關(guān)鍵字將指向全局環(huán)境，而不是定義時(shí)所在的那個(gè)對象。

一般，setTimeout函數(shù)接受兩個(gè)參數(shù)，第一個(gè)參數(shù)func|code是將要推遲執(zhí)行的函數(shù)名或者一段代碼（引擎內(nèi)部使用eval函數(shù)，將字符串轉(zhuǎn)為代碼），第二個(gè)參數(shù)delay是推遲執(zhí)行的毫秒數(shù)。但是，setTimeout 還可以添加更多參數(shù)。第二個(gè)之后的參數(shù)都將作為 推遲執(zhí)行函數(shù)的 參數(shù) 傳入。

// 傳入4個(gè)參數(shù)

setTimeout(function(a,b){

  // a=1,b=2
  console.log(a+b);

},1000,1,2);

// 3

IE 9.0及以下版本，只允許setTimeout有兩個(gè)參數(shù)，不支持更多的參數(shù)。有以下解決方法。

第一種是在一個(gè)匿名函數(shù)里面，讓回調(diào)函數(shù)帶參數(shù)運(yùn)行，再把匿名函數(shù)輸入setTimeout。

setTimeout(function() {
  myFunc("one", "two", "three");
}, 1000);

上面代碼中，myFunc是真正要推遲執(zhí)行的函數(shù)，有三個(gè)參數(shù)。如果直接放入setTimeout，低版本的IE不能帶參數(shù)，所以可以放在一個(gè)匿名函數(shù)。

第二種解決方法是使用bind方法，把多余的參數(shù)綁定在回調(diào)函數(shù)上面，生成一個(gè)新的函數(shù)輸入setTimeout。

setTimeout(function(arg1){}.bind(undefined, 10), 1000);

上面代碼中，bind方法第一個(gè)參數(shù)是undefined，表示將原函數(shù)的this綁定全局作用域，第二個(gè)參數(shù)是要傳入原函數(shù)的參數(shù)。它運(yùn)行后會返回一個(gè)新函數(shù)，該函數(shù)不帶參數(shù)。

如果被setTimeout推遲執(zhí)行的回調(diào)函數(shù)是某個(gè)對象的方法，那么該方法中的this關(guān)鍵字將指向全局環(huán)境，而不是定義時(shí)所在的那個(gè)對象。

舉例1

var x = 1;

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

setTimeout(o.y,1000);
// 1
// 上面代碼輸出的是1，而不是2，這表示o.y的this所指向的已經(jīng)不是o，而是全局環(huán)境了。

舉例2

function User(login) {
  this.login = login;
  this.sayHi = function() {
    console.log(this.login);
  }
}

var user = new User("John");

setTimeout(user.sayHi, 1000);

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

解決辦法：

方法一 將user.sayHi放在函數(shù)中執(zhí)行，sayHi是在user作用域內(nèi)執(zhí)行，而不是在全局作用域內(nèi)執(zhí)行，所以能夠顯示正確的值

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

方法二 使用bind方法，將綁定sayHi綁定在user上面

setTimeout(user.sayHi.bind(user), 1000);

HTML 5標(biāo)準(zhǔn)規(guī)定，setTimeout的最短時(shí)間間隔是4毫秒。為了節(jié)電，對于那些不處于當(dāng)前窗口的頁面，瀏覽器會將時(shí)間間隔擴(kuò)大到1000毫秒。另外，如果筆記本電腦處于電池供電狀態(tài)，Chrome和IE 9以上的版本，會將時(shí)間間隔切換到系統(tǒng)定時(shí)器，大約是15.6毫秒。setInterval的最短間隔時(shí)間是10毫秒，也就是說，小于10毫秒的時(shí)間間隔會被調(diào)整到10毫秒。

setInterval函數(shù)的用法與setTimeout完全一致。

setInterval指定的是“開始執(zhí)行”之間的間隔，并不考慮每次任務(wù)執(zhí)行本身所消耗的時(shí)間。因此實(shí)際上，兩次執(zhí)行之間的間隔會小于指定的時(shí)間。比如，setInterval指定每100ms執(zhí)行一次，每次執(zhí)行需要5ms，那么第一次執(zhí)行結(jié)束后95毫秒，第二次執(zhí)行就會開始。如果某次執(zhí)行耗時(shí)特別長，比如需要105毫秒，那么它結(jié)束后，下一次執(zhí)行就會立即開始。

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

寫個(gè)demo,確保 下一個(gè)對話框總是在關(guān)閉上一個(gè)對話框之后2000毫秒彈出：

var i=1;
var timer=setTimeout(function(){

    alert(i);
    timer =setTimeout(arguments.callee,2000);

},2000)

用setTimeout模擬了setInterval

function interval(func,wait){

    var interv=function(){
        func.call();
        setTimeout(interv,wait);
    }

    setTimeout(interv,wait);
}

interval(function(){console.log(1)},1000)

setTimeout和setInterval返回的整數(shù)值是連續(xù)的，也就是說，第二個(gè)setTimeout方法返回的整數(shù)值，將比第一個(gè)的整數(shù)值大1。利用這一點(diǎn)，可以寫一個(gè)函數(shù)，取消當(dāng)前所有的setTimeout。

clearTimeout實(shí)際應(yīng)用的例子。有些網(wǎng)站會實(shí)時(shí)將用戶在文本框的輸入，通過Ajax方法傳回服務(wù)器，jQuery的寫法如下。

$("textarea").on("keydown", ajaxAction);

這樣寫有一個(gè)很大的缺點(diǎn)，就是如果用戶連續(xù)擊鍵，就會連續(xù)觸發(fā)keydown事件，造成大量的Ajax通信。這是不必要的，而且很可能會發(fā)生性能問題。正確的做法應(yīng)該是，設(shè)置一個(gè)門檻值，表示兩次Ajax通信的最小間隔時(shí)間。如果在設(shè)定的時(shí)間內(nèi)，發(fā)生新的keydown事件，則不觸發(fā)Ajax通信，并且重新開始計(jì)時(shí)。如果過了指定時(shí)間，沒有發(fā)生新的keydown事件，將進(jìn)行Ajax通信將數(shù)據(jù)發(fā)送出去。

debounce 防抖動方法

function debounce(fn, delay){

  var timer = null; // 聲明計(jì)時(shí)器

  return function(){

    //保存當(dāng)前作用域的 this和 arguments
    var context = this;
    var args = arguments;

    clearTimeout(timer);
    timer = setTimeout(function(){

      fn.apply(context, args);

    }, delay);

  };
}

// 用法示例
$("textarea").on("keydown", debounce(ajaxAction, 2500))

setTimeout和setInterval的運(yùn)行機(jī)制是，將指定的代碼移出本次執(zhí)行，等到下一輪Event Loop時(shí)，再檢查是否到了指定時(shí)間。如果到了，就執(zhí)行對應(yīng)的代碼；如果不到，就等到再下一輪Event Loop時(shí)重新判斷。

這意味著，setTimeout和setInterval指定的代碼，必須等到本輪Event Loop的所有同步任務(wù)都執(zhí)行完，再等到本輪Event Loop的“任務(wù)隊(duì)列”的所有任務(wù)執(zhí)行完，才會開始執(zhí)行。由于前面的任務(wù)到底需要多少時(shí)間執(zhí)行完，是不確定的，所以沒有辦法保證，setTimeout和setInterval指定的任務(wù)，一定會按照預(yù)定時(shí)間執(zhí)行。

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

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

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

// 2,2,2
// 2
// ...

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

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

也就是說，setTimeout的真正作用是，在“消息隊(duì)列”的現(xiàn)有消息的后面再添加一個(gè)消息，規(guī)定在指定時(shí)間執(zhí)行某段代碼。setTimeout添加的事件，會在下一次Event Loop執(zhí)行。

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

也就是說，setTimeout(f, 0)的作用是，盡可能早地執(zhí)行指定的任務(wù)。而并不是會立刻就執(zhí)行這個(gè)任務(wù)。

setTimeout(f, 0)指定的任務(wù)，最早也要到下一次Event Loop才會執(zhí)行

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

可以調(diào)整事件的發(fā)生順序。

例子1

網(wǎng)頁開發(fā)中，某個(gè)事件先發(fā)生在子元素，然后冒泡到父元素，即子元素的事件回調(diào)函數(shù)，會早于父元素的事件回調(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ǎn)擊按鈕后，先觸發(fā)回調(diào)函數(shù)A，然后觸發(fā)函數(shù)C。在函數(shù)A中，setTimeout將函數(shù)B推遲到下一輪Loop執(zhí)行，這樣就起到了，先觸發(fā)父元素的回調(diào)函數(shù)C的目的了。

例子2

用戶在輸入框輸入文本，keypress事件會在瀏覽器接收文本之前觸發(fā)。想在用戶輸入文本后，立即將字符轉(zhuǎn)為大寫。但是實(shí)際上，它只能將上一個(gè)字符轉(zhuǎn)為大寫，因?yàn)闉g覽器此時(shí)還沒接收到文本。

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

例子3

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

// 寫法一  造成瀏覽器“堵塞”，因?yàn)镴avaScript執(zhí)行速度遠(yuǎn)高于DOM，會造成大量DOM操作“堆積”

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) clearTimeout(timer);
}

timer = setTimeout(func, 0);

正常任務(wù)（task）與微任務(wù)（microtask）。它們的區(qū)別在于，“正常任務(wù)”在下一輪Event Loop執(zhí)行，“微任務(wù)”在本輪Event Loop的所有任務(wù)結(jié)束后執(zhí)行。

正常任務(wù)：

setTimeout
setInterval
setImmediate
I/O
各種事件（比如鼠標(biāo)單擊事件）的回調(diào)函數(shù)

微任務(wù)：

process.nextTick 
Promise

console.log(1);

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

Promise.resolve().then(function() {
  console.log(3);
}).then(function() {
  console.log(4);
});

console.log(5);

// 1
// 5
// 3
// 4
// 2

參考文章
http://javascript.ruanyifeng....