簡(jiǎn)單通過(guò)settimeout看javascript的運(yùn)行機(jī)制
前言
我們知道JS是一個(gè)單線程的語(yǔ)言，而且其運(yùn)行機(jī)制比較特殊。
下面我們通過(guò)settimeout的幾個(gè)示例來(lái)展現(xiàn)javascript的運(yùn)行機(jī)制的特殊點(diǎn)
示例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，然后瀏覽器卡死，不會(huì)打印出2
javascript會(huì)先把需要運(yùn)行的內(nèi)容放到任務(wù)隊(duì)列中
但是如果遇到settimeout，會(huì)認(rèn)為這是個(gè)異步任務(wù)，會(huì)先放到異步隊(duì)列中
瀏覽器會(huì)先執(zhí)行同步任務(wù)，等到同步任務(wù)執(zhí)行完之后，再查看異步隊(duì)列
如果異步隊(duì)列中的任務(wù)的執(zhí)行時(shí)機(jī)到了，瀏覽器就會(huì)把任務(wù)放到同步隊(duì)列中去。
即：
異步任務(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呢？
因?yàn)闉g覽器會(huì)先執(zhí)行for循環(huán)
每執(zhí)行一次for循環(huán)，都把一個(gè)settimeout壓入異步隊(duì)列
1000毫秒之后，執(zhí)行settimeout里的方法的時(shí)候，i的值已經(jīng)是4了。
如果要打印0 1 2 3怎么辦呢？
利用閉包的特性，把i緩存到一個(gè)temp值里
for(var i = 0; i < 4; i++){
(function(temp){
setTimeout(function() {
console.log(temp);
}, 1000);
})(i);
}
// 打印 0 1 2 3
這樣做等于是每一次for循環(huán)都新建了一個(gè)匿名函數(shù)，i的值被存入了這個(gè)匿名函數(shù)的內(nèi)存里。
理解了閉包的同學(xué)一定可以理解這一點(diǎn)。
示例4
我們知道ES6引入了新的關(guān)鍵字let
在這里，let有一個(gè)新的特性
for(let i = 0; i < 4; i ++){
setTimeout(function(){
console.log(i);
}, 1000);
}
// 打印 0 1 2 3
示例4與示例3只有var和let這個(gè)地方有區(qū)別，但是打印出來(lái)的結(jié)果卻完全不同
這是因?yàn)閘et是一個(gè)塊級(jí)作用域
let定義的i，對(duì)于每一個(gè)for循環(huán)的執(zhí)行來(lái)說(shuō)都是一個(gè)全新的i（使用不同的內(nèi)存地址）
所以打印的時(shí)候可以得到0 1 2 3
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。
- JavaScript使用setTimeout實(shí)現(xiàn)倒計(jì)時(shí)效果
- JavaScript setTimeout()基本用法有哪些
- JavaScript setInterval()與setTimeout()計(jì)時(shí)器
- 如何通過(guò)setTimeout理解JS運(yùn)行機(jī)制詳解
- 從setTimeout看js函數(shù)執(zhí)行過(guò)程
- js學(xué)使用setTimeout實(shí)現(xiàn)輪循動(dòng)畫
- JavaScript計(jì)時(shí)器用法分析【setTimeout和clearTimeout】
- 詳解JS中定時(shí)器setInterval和setTImeout的this指向問(wèn)題
- JavaScript中setTimeout的那些事兒
- JS關(guān)于for循環(huán)中使用setTimeout的四種解決方案
相關(guān)文章
使用TS來(lái)編寫express服務(wù)器的方法步驟
這篇文章主要介紹了使用TS來(lái)編寫express服務(wù)器的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
JavaScript實(shí)現(xiàn)表單全選或反選效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)表單全選或反選效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
javascript 二進(jìn)制運(yùn)算技巧解析
javascript 中的二進(jìn)制運(yùn)算的一些技巧，曬出來(lái)和你們分享一下，希望可以幫助你們2012-11-11
JavaScript避免內(nèi)存泄露及內(nèi)存管理技巧
這篇文章主要介紹了JavaScript避免內(nèi)存泄露及內(nèi)存管理技巧,主要包括了delete應(yīng)用、閉包、DOM泄露、Timers計(jì)（定）時(shí)器泄露等等,需要的朋友可以參考下2014-09-09
本文給大家分享的是使用javascript實(shí)現(xiàn)解答九宮格問(wèn)題的算法，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了一文看懂JSONP原理和應(yīng)用，對(duì)JSONP感興趣的同學(xué)，可以參考下2021-04-04
JavaScript數(shù)組every方法的應(yīng)用場(chǎng)景實(shí)例
every方法確定數(shù)組中的每一項(xiàng)的結(jié)果都滿足所寫的條件的時(shí)候,就會(huì)返回true,否則返回false,這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組every方法應(yīng)用場(chǎng)景的相關(guān)資料,需要的朋友可以參考下2022-12-12
javascript實(shí)現(xiàn)仿IE頂部的可關(guān)閉警告條
仿windows IE頂部的敬告工具條，帶關(guān)閉按鈕，設(shè)計(jì)還算精美，你完全可以用到自己的網(wǎng)頁(yè)用于顯示提示等方面，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要介紹了JS刪除String里某個(gè)字符的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
JavaScript this在函數(shù)中的指向及實(shí)例詳解
這篇文章主要介紹了JavaScript this在函數(shù)中的指向及實(shí)例詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10