本文主要介紹了setTimeout原理；setTimeout(function(){..},0)的意義；setTimeout的this指向和參數問題。具有很好的參考價值，下面跟著小編一起來看下吧
大致介紹
今天看了一篇文章，覺得寫得不錯，所以學習了一下，這篇博客是我自己的理解和總結
原文：你應該知道的setTimeout 秘密
主要內容：
1、setTimeout原理
(＜)
3、setTimeout的this指向和參數問題setTimeout原理
先來看一段代碼：
（可能數字不同，但都大於1000）
之所以會輸出這樣的數，是因為執行到setTimeout時，會把其中的程式碼經過500ms後放到執行佇列中，但是之後執行while循環，while循環會佔據電腦資源，要佔據1000ms，在這1000ms中執行隊列中的任務都得等待，直到while循環結束
可以看出setTimeout的原理就是在經過給定的時間後，將任務添加到隊列中，等待cpu調度執行，它並不能保證任務在什麼時候執行
setTimeout(function(){..},0)的意義有時候見過這樣的程式碼：
var start = new Date();
setTimeout(function(){
console.log(new Date() - start);
},500);
while(new Date() - start <= 1000 ){}以為是當程式碼執行到setTimeout時，會立即將任務加入執行佇列。其實不然，雖然給定的延遲執行時間是0，但是setTimeout有自己的最小延遲時間（根據瀏覽器的不同而不同），所以即使寫了0s，但是setTimeout還是會在最小延遲時間後才添加任務到執行佇列中設定為0s的作用是為了可以改變任務的執行順序！因為瀏覽器會在執行完目前任務佇列中的任務，再執行setTimeout佇列中累積的的任務
例如：
setTimeout(function(){
//...........
},0);會產生這樣的問題：
種寫法時，只會取得到鍵盤按下前，輸入框中的內容
產生問題的原因是當我們按下鍵盤時，JavaScript引擎會執行keydown的事件處理程序，而更新輸入框中的值是在此之後執行的，所以當輸入輸入框中的值（this.value）時，輸入框中的值也為更新。
解決方法就是利用setTimeout，在更新了輸入框的值後，在取得它的值
setTimeout的this指向和參數問題setTimeout中回呼函數的this是指向window的
window.onload = function(){
document.querySelector('#one input').onkeydown = function(){
document.querySelector('#one span').innerHTML = this.value;
};
document.querySelector('#two input').onkeydown = function(){
setTimeout(function(){
document.querySelector('#two span').innerHTML = document.querySelector('#two input').value;
},0)
}
}在setTimeout通常是兩個參數，但是它可以由多個參數
例如：🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜var a = 1;
var obj = {
a : 2,
output : function(){
setTimeout(function(){
console.log(a);
},0);
}
}
obj.output(); //1
