摘要：重新認識三如果被推遲執行的回調函數是某個對象的方法，那么該方法中的關鍵字將指向全局環境，而不是定義時所在的那個對象。

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

// 傳入4個參數

setTimeout(function(a,b){

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

},1000,1,2);

// 3

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

第一種是在一個匿名函數里面，讓回調函數帶參數運行，再把匿名函數輸入setTimeout。

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

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

第二種解決方法是使用bind方法，把多余的參數綁定在回調函數上面，生成一個新的函數輸入setTimeout。

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

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

如果被setTimeout推遲執行的回調函數是某個對象的方法，那么該方法中的this關鍵字將指向全局環境，而不是定義時所在的那個對象。

舉例1

var x = 1;

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

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

舉例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，因為等到user.sayHi執行時，它是在全局對象中執行，所以this.login取不到值。

解決辦法：

方法一 將user.sayHi放在函數中執行，sayHi是在user作用域內執行，而不是在全局作用域內執行，所以能夠顯示正確的值

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

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

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

HTML 5標準規定，setTimeout的最短時間間隔是4毫秒。為了節電，對于那些不處于當前窗口的頁面，瀏覽器會將時間間隔擴大到1000毫秒。另外，如果筆記本電腦處于電池供電狀態，Chrome和IE 9以上的版本，會將時間間隔切換到系統定時器，大約是15.6毫秒。setInterval的最短間隔時間是10毫秒，也就是說，小于10毫秒的時間間隔會被調整到10毫秒。

setInterval函數的用法與setTimeout完全一致。

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

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

寫個demo,確保 下一個對話框總是在關閉上一個對話框之后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返回的整數值是連續的，也就是說，第二個setTimeout方法返回的整數值，將比第一個的整數值大1。利用這一點，可以寫一個函數，取消當前所有的setTimeout。

clearTimeout實際應用的例子。有些網站會實時將用戶在文本框的輸入，通過Ajax方法傳回服務器，jQuery的寫法如下。

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

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

debounce 防抖動方法

function debounce(fn, delay){

  var timer = null; // 聲明計時器

  return function(){

    //保存當前作用域的 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的運行機制是，將指定的代碼移出本次執行，等到下一輪Event Loop時，再檢查是否到了指定時間。如果到了，就執行對應的代碼；如果不到，就等到再下一輪Event Loop時重新判斷。

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

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

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

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

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

結果就是等到第二行語句運行完成以后，立刻連續輸出三個2，然后開始每隔1000毫秒，輸出一個2。

等到當前腳本的同步任務和“任務隊列”中已有的事件，全部處理完以后，才會執行setTimeout指定的任務。

也就是說，setTimeout的真正作用是，在“消息隊列”的現有消息的后面再添加一個消息，規定在指定時間執行某段代碼。setTimeout添加的事件，會在下一次Event Loop執行。

setTimeout(f, 0)將第二個參數設為0，作用是讓f在現有的任務（腳本的同步任務和“消息隊列”指定的任務）一結束就立刻執行。

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

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

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

function a(x) {
  console.log("a() 開始運行");
  b(x);
  console.log("a() 結束運行");
}

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

console.log("當前任務開始");
a(42);
console.log("當前任務結束");

// 當前任務開始
// a() 開始運行
// b() 開始運行
// 傳入的值為42
// b() 結束運行
// a() 結束運行
// 當前任務結束
// Timeout

可以調整事件的發生順序。

例子1

網頁開發中，某個事件先發生在子元素，然后冒泡到父元素，即子元素的事件回調函數，會早于父元素的事件回調函數觸發。如果，我們先讓父元素的事件回調函數先發生，就要用到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"
};

上面代碼在點擊按鈕后，先觸發回調函數A，然后觸發函數C。在函數A中，setTimeout將函數B推遲到下一輪Loop執行，這樣就起到了，先觸發父元素的回調函數C的目的了。

例子2

用戶在輸入框輸入文本，keypress事件會在瀏覽器接收文本之前觸發。想在用戶輸入文本后，立即將字符轉為大寫。但是實際上，它只能將上一個字符轉為大寫，因為瀏覽器此時還沒接收到文本。

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

例子3

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

// 寫法一  造成瀏覽器“堵塞”，因為JavaScript執行速度遠高于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);

正常任務（task）與微任務（microtask）。它們的區別在于，“正常任務”在下一輪Event Loop執行，“微任務”在本輪Event Loop的所有任務結束后執行。

正常任務：

setTimeout
setInterval
setImmediate
I/O
各種事件（比如鼠標單擊事件）的回調函數

微任務：

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....