時(shí)間碎片化

總所周知，瀏覽器是單線程運(yùn)行的（web worker除外），當(dāng)一個(gè)按鈕點(diǎn)擊的過程中，會(huì)產(chǎn)生UI事務(wù)和JavaScript事務(wù)，同時(shí)推送到隊(duì)列中，等待執(zhí)行。

業(yè)務(wù)較復(fù)雜的腳本執(zhí)行耗時(shí)較長(zhǎng)處理時(shí)間超過100ms時(shí)，導(dǎo)致UI更新和其他腳本事件無法執(zhí)行，影響用戶體驗(yàn)。
定時(shí)器的出現(xiàn)就是為了解決這個(gè)問題，設(shè)計(jì)理念是將復(fù)雜的腳本事務(wù)切割成單個(gè)事務(wù)，讓耗時(shí)的事務(wù)讓出時(shí)間，切換任務(wù)執(zhí)行。

代碼塊

var btn = document.getElementById('myBtn');
btn.onclick = function(){
  onProcessMethod();
  setTimeout(function(){
      this.style.backgroundcolor = 'red';
    },50);
  finishedProcessMethod();
};

定時(shí)器中的事件會(huì)放到任務(wù)隊(duì)列中，當(dāng)btn.onclick事件執(zhí)行完成之后，隊(duì)列中的定時(shí)器事件開始執(zhí)行，這樣做的意義在于保證btn.onclik事件完整執(zhí)行，50ms這個(gè)參數(shù)并不保證定時(shí)器事件一定執(zhí)行。

Tips：setInterval()和setTimeout()最大的區(qū)別在于前者會(huì)重復(fù)向隊(duì)列中推送任務(wù)