JavaScript 中 setTimeout 的那些事兒
一、setTimeout那些事兒之單執行緒
一直以來，大家都在說Javascript是單執行緒，瀏覽器無論在什麼時候，都且只有一個執行緒在執行JavaScript程式。
但是，不知道大家有疑問沒——就是我們在程式設計過程中的setTimeout(類似的還有setInterval、Ajax)，不是非同步執行的嗎？！！
例如：
<!DOCTYPE html>
<head>
<title>setTimeout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
console.log("a");
//利用setTimeout延遲執行匿名函式
setTimeout(function(){
console.log("b");
},100);
console.log("c");
</script>
</body>
</html>
執行程式碼，開啟chrome偵錯程式，得如下結果
這個結果很容易理解，因為我setTimeout裡的內容是在100ms後執行的嘛，當然是先輸出a，再輸出c，100ms後再輸出setTimeout裡的b嘛。
咦，那Javascript這不就不是單執行緒了嘛，這不就可以實現多執行緒了？！！
其實，不是的。setTimeout沒有打破JavaScript的單執行緒機制，它其實還是單執行緒。
為什麼這麼說呢，那就得理解setTimeout到底是個怎麼回事。
請看下面的程式碼，猜結果:
<!DOCTYPE html>
<head>
<title>setTimeout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
var date = new Date();
//列印才進入時的時間
console.log('first time: ' + date.getTime());
//一秒後列印setTimeout裡匿名函式的時間
setTimeout(function(){
var date1 = new Date();
console.log('second time: ' + date1.getTime() );
console.log( date1.getTime() - date.getTime() );
},1000);
//重複操作
for(var i=0; i < 10000 ; i++){
console.log(1);
}
</script>
</body>
</html>
看了上面的程式碼，猜猜輸出的結果是多少呢？1000毫秒？
我們開啟chrome偵錯程式，見下圖
納尼，怎麼不是1000毫秒呢？！！！
我們再看看下面的程式碼：
<!DOCTYPE html>
<head>
<title>setTimeout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
//一秒後執行setTimeout裡的匿名函式，alert下
setTimeout(function(){
alert("monkey");
},1000);
while(true){};
</script>
</body>
</html>
執行程式碼後！
我靠，怎麼一直重新整理，瀏覽器卡死了呢，並且沒有alert！！
按道理，即使我while無限迴圈，在1秒後也得alert一下啊。
種種問題皆一個原因，JavaScript是單執行緒 。
要記住JavaScript是單執行緒，setTimeout沒有實現多執行緒，它背後的真相是這樣滴：
JavaScript引擎是單執行緒執行的,瀏覽器無論在什麼時候都只且只有一個執行緒在執行JavaScript程式。
瀏覽器的核心是多執行緒的，它們在核心控制下相互配合以保持同步，一個瀏覽器至少實現三個常駐執行緒：JavaScript引擎執行緒，GUI渲染執行緒，瀏覽器事件觸發執行緒。
*JavaScript引擎是基於事件驅動單執行緒執行的，JavaScript引擎一直等待著任務佇列中任務的到來，然後加以處理，瀏覽器無論什麼時候都只有一個JavaScript執行緒在執行JavaScript程式。
*GUI渲染執行緒負責渲染瀏覽器介面，當介面需要重繪（Repaint）或由於某種操作引發迴流(Reflow)時,該執行緒就會執行。但需要注意，GUI渲染執行緒與JavaScript引擎是互斥的，當JavaScript引擎執行時GUI執行緒會被掛起，GUI更新會被儲存在一個佇列中等到JavaScript引擎空閒時立即被執行。
*事件觸發執行緒，當一個事件被觸發時該執行緒會把事件新增到待處理佇列的隊尾，等待JavaScript引擎的處理。這些事件可來自JavaScript引擎當前執行的程式碼塊如setTimeout、也可來自瀏覽器核心的其他執行緒如滑鼠點選、Ajax非同步請求等，但由於JavaScript的單執行緒關係所有這些事件都得排隊等待JavaScript引擎處理（當執行緒中沒有執行任何同步程式碼的前提下才會執行非同步程式碼）。
so,通過以上講解，以上種種問題迎刃而解。
二、setTimeout那些事兒之延遲時間為0
當setTimeout的延遲時間為0時，大家想想它會怎麼執行呢？
例如下面的程式碼：
<!DOCTYPE html>
<head>
<title>setTimeout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
console.log('a');
setTimeout(function(){
console.log('b');
},0);
console.log('c');
console.log('d');
</script>
</body>
</html>
執行程式碼結果如下：
假設你已經知道Javascript單執行緒的執行原理了。那麼，可能會有這樣的疑問：setTimeout的時間為0，都沒加到處理佇列的末尾，怎麼會晚執行呢？不應該立即執行嗎？
我的理解是，就算setTimeout的時間為0，但是它仍然是setTimeout啊，原理是不變的。所以會將其加入到佇列末尾，0秒後執行。
況且，經過查詢資料發現，setTimeout有一個最小執行時間，當指定的時間小於該時間時，瀏覽器會用最小允許的時間作為setTimeout的時間間隔，也就是說即使我們把setTimeout的毫秒數設定為0，被呼叫的程式也沒有馬上啟動。
這個最小的時間間隔是多少呢？
這和瀏覽器及作業系統有關。在John Resig的《Javascript忍者的祕密》一書中提到–Browsers all have a 10ms minimum delay on OSX and a(approximately) 15ms delay on Windows.（在蘋果機上的最小時間間隔是10毫秒，在Windows系統上的最小時間間隔大約是15毫秒），另外，MDC中關於setTimeout的介紹中也提到，Firefox中定義的最小時間間隔（DOM_MIN_TIMEOUT_VALUE）是10毫秒，HTML5定義的最小時間間隔是4毫秒。
說了這麼多，setTimeout的延遲時間為0，看來沒什麼意義嘛，都是放在佇列後執行嘛。
非也，天生我材必有用，就看你怎麼用咯。拋磚迎玉下。
1、可以用setTimeout的延遲時間為0，模擬動畫效果哦。
詳情請見下程式碼：
<!DOCTYPE html>
<head>
<title>setTimeout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="container" style="width:100px;height:100px;border:1px solid black;"></div>
<div id="btn" style="width:40px;height:40px;line-height:40px;margin-top:20px;background:pink;">click</div>
<script>
window.onload = function(){
var con = document.getElementById('container');
var btn = document.getElementById('btn');
//Params: i 為起始高度，num為預期高度
function render(i, num) {
i++;
con.style.height = i + 'px';
//亮點在此
if(i < num){
setTimeout(function() {
render(i, num);
},0);
}
else {
con = null;
btn = null;
}
};
btn.onclick = function(){
render(100, 200);
};
};
</script>
</body>
</html>
由於是動畫，所以想看其效果，還請各位看官執行下程式碼哦。
程式碼第19行中，利用setTimeout，在每一次render執行完成（給高度遞增1）後，由於Javascript是單執行緒，且setTimeout裡的匿名函式會在render執行完成後，再執行render。所以可以實現動畫效果。
2、可以用setTimeout的延遲時間為0，實現捕獲事件哦。
當我們點選子元素時，我們可以利用setTimeout的特性，來模擬捕獲事件。
請見如下程式碼：
<!DOCTYPE html>
<head>
<title>setTimeout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
#parent {
width:100px;
height:100px;
border:1px solid black;
}
#child {
width:50px;
height:50px;
background:pink;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
<script>
//點選子元素，實現子元素的事件在父元素觸發後觸發
window.onload = function(){
var parent = document.getElementById('parent');
var child = document.getElementById('child');
parent.onclick = function(){
console.log('parent');
}
child.onclick = function(){
//利用setTimeout，冒泡結束後，最後輸出child
setTimeout(function(){
console.log('child');
},0);
}
parent = null;
child = null;
}
</script>
</body>
</html>
執行程式碼，點選粉紅色方塊，輸出結果：
三、setTimeout那些事兒之this
說到this，對於它的理解就是：this是指向函式執行時的當前物件，倘若沒有明確的當前物件，它就是指向window的。
好了，那麼我們來看看下面這段程式碼：
<!DOCTYPE html>
<head>
<title>setTimeout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
var name = '!!';
var obj = {
name:'monkey',
print:function(){
console.log(this.name);
},
test:function(){
//this.print
setTimeout(this.print,1000);
}
}
obj.test();
</script>
</body>
</html>
通過chrome偵錯程式，檢視輸出結果：
咦，它怎麼輸出的是”!!”呢？不應該是obj裡的”monkey”嗎？！！
這是因為setTimeout中所執行函式中的this，永遠指向window。
不對吧，那上面程式碼中的setTimeout(this.print,1000)裡的this.print怎麼指向的是obj呢？！！
注意哦，我這裡說的是“延遲執行函式中的this”，而不是setTimeout呼叫環境下的this。
什麼意思？
setTimeout(this.print,1000)，這裡的this.print中的this就是呼叫環境下的；
而this.print=function(){console.log(this.name);}，這個匿名函式就是setTimeout延遲執行函式，其中的this.name也就是延遲執行函式中的this啦。
嘿嘿，這下明白了吧。
var age = 24;
function Fn(){
this.age = 18;
setTimeout(function(){
//this代表window
console.log(this);
//輸出24，而不是Fn的18
console.log(this.age);
},1000);
}
new Fn();
咦，那有個疑問，比如我想在setTimeout延遲執行函式中的this指向呼叫的函式呢，而不是window？！！我們該怎麼辦呢。
常用的方法就是利用that。
that？
對，that。利用閉包的知識，讓that保證你傳進去的this，是你想要的。
詳情見下:
var age = 24;
function Fn(){
//that在此
var that = this;
this.age = 18;
setTimeout(function(){
console.log(that);
console.log(that.age);
},1000);
}
new Fn();
還有一種方法就是，利用bind。
如下:
var age = 24;
function Fn(){
this.age = 18;
//bind傳入this
setTimeout(function(){
console.log(this);
console.log(this.age);
}.bind(this),1000);
}
new Fn();
相關文章
- JavaScript非同步處理的那些事兒JavaScript非同步
- 關於JavaScript原型物件那些事兒JavaScript原型物件
- javascript中this那些事JavaScript
- webpack的那些事兒Web
- Ubuntu的那些事兒Ubuntu
- Docker容器中應避免的那些事兒Docker
- Java中的陣列 - Java那些事兒Java陣列
- babel那些事兒Babel
- PHP那些事兒PHP
- OAuth那些事兒OAuth
- Git那些事兒Git
- Flutter 中“倒數計時”的那些事兒Flutter
- https的那些事兒HTTP
- 面試的那些事兒--01面試
- TCP 的那些事兒（下）TCP
- TCP 的那些事兒（上）TCP
- Rest API 的那些事兒RESTAPI
- 聊聊viewport那些事兒View
- Java字串那些事兒Java字串
- 測試在專案流程中的那些事兒
- Swift 中關於操作符的那些事兒Swift
- 說說Java裡的equals（中）- Java那些事兒Java
- 漏洞檢測的那些事兒
- 雲原生java的那些事兒Java
- HTTP 快取的那些事兒HTTP快取
- iOS 截圖的那些事兒iOS
- Android Drawable的那些事兒Android
- Cocos Creator 中的動作系統那些事兒
- HTML5中關於標籤的那些事兒HTML
- C語言那些事兒C語言
- MySQL優化那些事兒MySql優化
- PHP 閉包那些事兒PHP
- 字元編碼那些事兒字元
- 網路安全那些事兒
- 依賴注入那些事兒依賴注入
- IT專案管理那些事兒專案管理
- Hadoop搭建那些事兒Hadoop
- Filebeat 收集日誌的那些事兒