快捷導(dǎo)航

簡單通過settimeout看javascript的運行機制

更新時間：2019年05月10日 14:40:08 作者：aaron_lawliet

這篇文章主要給大家介紹了關(guān)于如何通過settimeout看javascript的運行機制的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

我們知道JS是一個單線程的語言，而且其運行機制比較特殊。

下面我們通過settimeout的幾個示例來展現(xiàn)javascript的運行機制的特殊點

示例1

console.log(1);
setTimeout(function(){
 console.log(2);
},0);
console.log(3);
// 打印出 1 3 2

示例2

console.log('1');
setTimeout(function(){
 console.log('2');
},0);
while(1){}
// 打印出1，然后瀏覽器卡死，不會打印出2

javascript會先把需要運行的內(nèi)容放到任務(wù)隊列中

但是如果遇到settimeout，會認為這是個異步任務(wù)，會先放到異步隊列中

瀏覽器會先執(zhí)行同步任務(wù)，等到同步任務(wù)執(zhí)行完之后，再查看異步隊列

如果異步隊列中的任務(wù)的執(zhí)行時機到了，瀏覽器就會把任務(wù)放到同步隊列中去。

即：

異步任務(wù)一定在同步任務(wù)之后執(zhí)行。

示例3

for(var i = 0; i < 4; i++){
 setTimeout(function() {
  console.log(i);
 }, 1000);
}
// 打印 4 4 4 4

為什么打印出的是4 4 4 4呢？

因為瀏覽器會先執(zhí)行for循環(huán)

每執(zhí)行一次for循環(huán)，都把一個settimeout壓入異步隊列

1000毫秒之后，執(zhí)行settimeout里的方法的時候，i的值已經(jīng)是4了。

如果要打印0 1 2 3怎么辦呢？

利用閉包的特性，把i緩存到一個temp值里

for(var i = 0; i < 4; i++){
 (function(temp){
  setTimeout(function() {
   console.log(temp);
  }, 1000);
 })(i);
}
// 打印 0 1 2 3

這樣做等于是每一次for循環(huán)都新建了一個匿名函數(shù)，i的值被存入了這個匿名函數(shù)的內(nèi)存里。

理解了閉包的同學(xué)一定可以理解這一點。

示例4

我們知道ES6引入了新的關(guān)鍵字let

在這里，let有一個新的特性

for(let i = 0; i < 4; i ++){
 setTimeout(function(){
  console.log(i); 
 }, 1000);
}
// 打印 0 1 2 3

示例4與示例3只有var和let這個地方有區(qū)別，但是打印出來的結(jié)果卻完全不同

這是因為let是一個塊級作用域

let定義的i，對于每一個for循環(huán)的執(zhí)行來說都是一個全新的i（使用不同的內(nèi)存地址）

所以打印的時候可以得到0 1 2 3

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

簡單通過settimeout看javascript的運行機制

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具