來猜測一下誰先出現(xiàn)

settimeout.png

結(jié)果：

Paste_Image.png

settimeout與0ms

settimeout又最小的執(zhí)行時間，當(dāng)指定的時間小于該時間時，瀏覽器會用最小的允許的時間最為settimeout的時間間隔。
不同的瀏覽器實際情況不同，IE8和更早的IE的時間精確度是15.6ms。不過，隨著HTML5的出現(xiàn)，在高級版本的瀏覽器（Chrome、ie9+等），定義的最小時間間隔是不得低于4毫秒，如果低于這個值，就會自動增加
所以setTimeout(fn, 0)實現(xiàn)了插隊操作，要求瀏覽器盡快處理回調(diào)函數(shù)。
setTimeout(fn, 0) 的應(yīng)用場景：改變?nèi)蝿?wù)的執(zhí)行順序。

document.querySelector('#one input').onkeydown = function() {   
  document.querySelector('#one span').innerHTML = this.value;   
};   
document.querySelector('#second input').onkeydown = function() {   
  setTimeout(function() {   
    document.querySelector('#second span').innerHTML = document.querySelector('#second input').value;   }, 0);
};

當(dāng)你兩個表單輸入內(nèi)容時，第一種寫法會顯示此次輸入前的內(nèi)容，使用settimeout的函數(shù)會獲取到輸入框的內(nèi)容。

雖然使用onkeyup就可以獲取輸入框的值，但是存在以下兩個問題：

1. 長按鍵，不會觸發(fā)onkeyup
2. 快速輸入時，事件的觸發(fā)順序并不是以onkeydown>onkeypress>onkeyup順序觸發(fā)。

而使用settimeout的執(zhí)行順序是：```onkeydown>onkeypress>function>onkeyup

settimeout與回調(diào)函數(shù)中的this

setTimeout是window提供的方法，所以回調(diào)函數(shù)中的this指向的是window對象。

var a = 1;   
var obj = {   
  a: 2,   
  test: function() {   
    setTimeout(function(){   
      console.log(this.a);   
    }, 0);   
  }   
};   
obj.test();  //  1

setTimeout的參數(shù)

大家都知道第一個參數(shù)是回調(diào)函數(shù)，第二個參數(shù)是延時時間，那么傳入第三，第四的參數(shù)是什么？

setTimeout(function (a, b) {
  console.log(a, b);   // 1， 2
}, 0, 1, 2)

setTimeout第三個及以后的參數(shù)會作為回調(diào)函數(shù)的參數(shù)。