資訊專欄INFORMATION COLUMN
摘要：最近面試的時候，經(jīng)常會遇到這類問題，比如你怎么理解的事件處理機制什么任務(wù)優(yōu)先級高，什么任務(wù)會在主進(jìn)程中我覺得從一個例子出發(fā)可以很好的從各方面的去分析，這樣也會是一個比較滿意的答案常見的例子這里我們?nèi)绻蝗ニ伎家幌潞苋菀椎贸鲞@類答案，仔細(xì)思
最近面試的時候，經(jīng)常會遇到這類問題，比如：你怎么理解JS的事件處理機制？什么任務(wù)優(yōu)先級高，什么任務(wù)會在主進(jìn)程中？
我覺得從一個例子出發(fā)可以很好的從各方面的去分析，這樣也會是一個比較滿意的答案
常見的例子：
for(var i = 0; i<10; i++) {
setTimeout(()=>{
console.log(i)
},0)
}
這里我們?nèi)绻蝗ニ伎家幌潞苋菀椎贸?0-9 這類答案，仔細(xì)思考就會發(fā)現(xiàn)這里輸出的是10次10
這里我們可以先從JS的處理機制先說起，在JS的處理機制里 同步最高>異步>回調(diào)函數(shù)
那么這里我們就很容易理解了，那在執(zhí)行中順序就是，先執(zhí)行完同步代碼for循環(huán)，然后在0ms后執(zhí)行異步代碼setTimeout。
因為在執(zhí)行的時候setTimeout函數(shù)會去找i這個變量，但是由于i在for里面執(zhí)行完之后已經(jīng)變?yōu)?0，由于是var聲明對于settimeout而言是全局變量，所以打印了10次10
那如果需要實現(xiàn)打印0-9的話呢？
第一種方法：使用ES6中的let 很容去解決作用域的問題
如果只用ES5的方法呢，我們可以用這樣實現(xiàn)
for(var i = 0; i<10; i++) {
(function(i){
setTimeout(()=>{
console.log(i)
},0)
})(i)
}
在這里去執(zhí)行**立即執(zhí)行函數(shù)**，它會迫使每次進(jìn)入循環(huán)之前都會立即去執(zhí)行代碼，從而保證得到i都是不一樣的
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/105133.html
摘要：圖片轉(zhuǎn)引自的演講和兩個定時器中回調(diào)的執(zhí)行邏輯便是典型的機制。異步編程關(guān)于異步編程我的理解是，在執(zhí)行環(huán)境所提供的異步機制之上，在應(yīng)用編碼層面上實現(xiàn)整體流程控制的異步風(fēng)格。 問題背景 在一次開發(fā)任務(wù)中，需要實現(xiàn)如下一個餅狀圖動畫，基于canvas進(jìn)行繪圖，但由于對于JS運行環(huán)境中異步機制的不了解，所以遇到了一個棘手的問題，始終無法解決，之后在與同事交流之后才恍然大悟。問題的根節(jié)在于經(jīng)典的J...
摘要：瀏覽器是多進(jìn)程的，而瀏覽器的內(nèi)核渲染進(jìn)程是多線程的。如果已經(jīng)將回調(diào)函數(shù)放進(jìn)任務(wù)隊列，但是主線程正在執(zhí)行一個非常耗時的任務(wù)，當(dāng)這個任務(wù)執(zhí)行完畢后，主線程去任務(wù)隊列中取任務(wù)，這個時候，就會出現(xiàn)連續(xù)執(zhí)行的情況，也就是說相當(dāng)于失效了。 前言 ??在刷筆試題的時候，經(jīng)常會碰到setTimeout的問題，只知道這個是設(shè)置定時器；但是考察的重點一般是在一個方法中包含了定時器，定時器中的打印和方法中打...
摘要：曾經(jīng)的理解首先，是單線程語言，也就意味著同一個時間只能做一件事，那么為什么不是多線程呢這樣還能提高效率啊假定同時有兩個線程，一個線程在某個節(jié)點上編輯了內(nèi)容，而另一個線程刪除了這個節(jié)點，這時瀏覽器就很懵逼了，到底以執(zhí)行哪個操作呢所以，設(shè)計者把 Event Loop曾經(jīng)的理解 首先，JS是單線程語言，也就意味著同一個時間只能做一件事，那么 為什么JavaScript不是多線程呢？這樣還能提...
摘要：前端性能優(yōu)化指南優(yōu)化緩存異步并不等于即時。操作性能問題主要有以下原因。發(fā)生在之前，所以相對來說會造成更多性能損耗。新引擎還對對象屬性訪問做了優(yōu)化，解決方案叫，簡稱。代價是前置的掃描類型編譯優(yōu)化。數(shù)組，，閉包變量不在優(yōu)化范疇之列。 前端性能優(yōu)化指南 AJAX優(yōu)化 緩存AJAX： 異步并不等于即時。 請求使用GET： 當(dāng)使用XMLHttpRequest時，而URL長度不到2K...
摘要：中叫做調(diào)用棧先進(jìn)后出，后進(jìn)先出。如下圖這是典型的內(nèi)存溢出，可能會出現(xiàn)在某些場景下需要遞歸，但業(yè)務(wù)邏輯中的判斷又沒能正常計算進(jìn)入到預(yù)設(shè)情況，于是調(diào)用棧中不斷進(jìn)入，又無法執(zhí)行完，就造成內(nèi)存溢出了。 本文主要介紹Javascript事件循環(huán)在瀏覽器上的一些特性和應(yīng)用介紹。 Javascript小知識 JavaScript的并發(fā)模型基于事件循環(huán)(Event Loop)。這個模型與像C或者Jav...
閱讀 3193·2020-01-08 12:17
閱讀 2050·2019-08-30 15:54
閱讀 1207·2019-08-30 15:52
閱讀 2101·2019-08-29 17:18
閱讀 1091·2019-08-29 15:34
閱讀 2517·2019-08-27 10:58
閱讀 1927·2019-08-26 12:24
閱讀 437·2019-08-23 18:23
