今天比較忙，分享一個小的知識點
這邊一般的用法就不贅述了
忘記的話可以自行看教學
setTimeout
setInterval

以下簡述一下

Syntax

setTimeout(function, milliseconds, param1, param2, ...)

• function 這邊可以直接定義函式，也可以只傳函式名字
• milliseconds 幾毫秒後要做
• param1,param2,... 這邊是把這些參數傳給你第1個定義的函式(較少人這樣用)

const printInf=(myName,myAge)=>console.log(myName,myAge);
setTimeout(printInf,1000,'paul',36);

以上會把後面2個參數('paul',36)傳給printInf

雖然這是非同步，但有什麼特別的呢
這邊有以下議題

• 改變事件進globalEC的順序
• 解決鍵盤事件跟瀏覽器不同步的問題

而雖然目前setTimout 可以應用於以下場景的issue
但es6中又有沒有什麼新工具讓我們更方便的達到這些功能呢?

改變事件進globalEC的順序

這個上一篇有說過
由於瀏覽器會將 setTimeout 其中要執行的function 放進消息隊列
所以會先處理在globalEC的事件，再處理微任務隊列，最後處理一般任務隊列
所以可以藉由這個來改變(但我們之後不會這樣使用)

解決鍵盤事件跟瀏覽器不同步的問題

考慮以下狀況
當有一個input 輸入文字框，必需即時截取輸入的文字內容
於是使用了onkeydown() 來抓取目前在文字框的內容
但總是出現問題
codepen

const inputText=document.querySelectorAll("input");

inputText[0].onkeydown=function(){
  inputText[1].value=this.value  
}
  

這邊會發現永遠後面輸入框的值，都是上一次所keyin的值

為什麼呢?

這是因為onKeydown的事件太快被處理，導致他抓取的時候，瀏覽器的dom的值還沒有被改變
所以永遠抓取到的都是上一次的狀態
這時候用setTimeout就可以很容易的改變事件處理順序
我們不改變onkeydown的順序，改變的是裡面處理的內容
利用第一個學到的技巧，我們用setTimeout 將原本要放進globalEC的
inputText[1].value=this.value
放進任務隊列
這樣就可以達成我們要的效果了
所以將上述程式碼改為

const inputText=document.querySelectorAll("input");

inputText[0].onkeydown=function(){
 setTimeout(()=>inputText[1].value=this.value,50);
}

就可以解決這樣的狀況了，當然我們有更好的作法，後續文章再詳細說明