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

settimeout.png

結(jié)果：

Paste_Image.png

settimeout與0ms

settimeout又最小的執(zhí)行時(shí)間，當(dāng)指定的時(shí)間小于該時(shí)間時(shí)，瀏覽器會(huì)用最小的允許的時(shí)間最為settimeout的時(shí)間間隔。
不同的瀏覽器實(shí)際情況不同，IE8和更早的IE的時(shí)間精確度是15.6ms。不過，隨著HTML5的出現(xiàn)，在高級(jí)版本的瀏覽器（Chrome、ie9+等），定義的最小時(shí)間間隔是不得低于4毫秒，如果低于這個(gè)值，就會(huì)自動(dòng)增加
所以setTimeout(fn, 0)實(shí)現(xiàn)了插隊(duì)操作，要求瀏覽器盡快處理回調(diào)函數(shù)。
setTimeout(fn, 0) 的應(yīng)用場(chǎ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)你兩個(gè)表單輸入內(nèi)容時(shí)，第一種寫法會(huì)顯示此次輸入前的內(nèi)容，使用settimeout的函數(shù)會(huì)獲取到輸入框的內(nèi)容。

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

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

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

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

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

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

setTimeout的參數(shù)

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

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

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