摘要:問題之前有提到一個異步問題,如下代碼輸出什么這是我近期遇到的一個面題。探索為什么呢首先,是異步執(zhí)行的。如果不考慮兼容性,我們可以使用的,把每個變成一個局部變量。假設(shè)的時間是一個隨機數(shù)。
問題
之前有提到一個異步問題,如下代碼輸出什么:
for(var i = 0;i<10;i++){ setTimeout(function(){ console.log(i); },1000); }
這是我近期遇到的一個面題。當(dāng)時我并不知道。不過后來面試官告訴我,setTimeout是異步執(zhí)行的。并且告訴了我答案。后來在群里邊討論,明白了。會輸出10個10。
探索為什么呢?首先,setTimeout是異步執(zhí)行的。所以在setTimeout執(zhí)行之前,全局變量i早就已經(jīng)變成了10。
那么如何解決能讓他輸出0-9呢?其實要解決的就是:在使用i的時候保證i的值還是我們當(dāng)時希望的那個值。
如果不考慮兼容性,我們可以使用es6的let,把每個i變成一個局部變量。代碼如下:
for(let i = 0;i<10;i++){ setTimeout(function(){ console.log(i); },1000); }
如果要考慮兼容性,那么我們用一個匿名函數(shù),把i當(dāng)做參數(shù)傳進去,這樣我們再用的i就是局部變量了。不會受到外邊的影響了。代碼如下:
for(var i = 0;i<10;i++){ (function(i){ setTimeout(function(){ console.log(i); },1000); })(i) }
如果使用promise,那么我們可以使用如下寫法:
for(var i = 0;i<10;i++){ let a = i; let p = new Promise((resolve,reject)=>{ setTimeout(()=>{resolve(a)},1000); }); p.then(i=>console.log(i)) }思考
可能這種promise方法更麻煩了。但是適用于更復(fù)雜的需求了。假設(shè)setTimeout的時間是一個隨機數(shù)。而我們要在所有數(shù)字都打印完畢再去做一些操作,那么該怎么做呢?
具體可以參見:https://segmentfault.com/a/11...
執(zhí)行效率上的考慮:
console.time("a"); for(let i = 0;i<10;i++){ setTimeout(function(){ console.log(i); },1000); } console.timeEnd("a"); console.time("b"); for(var i = 0;i<10;i++){ (function(i){ setTimeout(function(){ console.log(i); },1000); })(i) } console.timeEnd("b"); console.time("c"); for(var i = 0;i<10;i++){ let a = i; let p = new Promise((resolve,reject)=>{ setTimeout(()=>{resolve(a)},1000); }); p.then(i=>console.log(i)) } console.timeEnd("c");
效率上,我在目前新版chrome的執(zhí)行結(jié)果如下:
a: 0.35009765625ms b: 0.348876953125ms c: 0.880126953125ms
注意:可能不同系統(tǒng)不同環(huán)境的執(zhí)行結(jié)果不一樣。所以,有時候極客玩玩就是了,認真你就輸啦-.-
總結(jié)以前我偏執(zhí)的認為,能做出東西就行了。基礎(chǔ)不重要。所以我總是一只停留在做東西的階段。但是后來反過來想:假設(shè)你想買車,那么你會選一個對汽車參數(shù)很熟的銷售員還是選擇一個你問什么問題他都說查查再回答你的銷售員呢?答案是肯定的。所以說,可能公司招人也一樣吧。
但是,這些問題真的有用嗎?沒錯,我都有很多問題沒回答好,如果是為了準備一次很nice的面試,我大可以特意的多跑幾家,然后把遇到的有問題的面試題都總結(jié)下來。不會的再去查詢,我想翻來覆去也沒多少基礎(chǔ)可問吧?就像找個美工就問:你會切圖嘛?這些稍微花點時間都能學(xué)會的問題。個人覺得沒特別大的意義。
(本文摘取自我的博客:http://79px.com/blog/57cd347b...)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/90980.html
摘要:最近做微信小程序的開發(fā)時,想做一個靠感知手機方向,使頁面上節(jié)點跟隨移動的動畫即重力感應(yīng)視差效果功能。最終實現(xiàn)的效果會有卡頓現(xiàn)象。如果是后臺標(biāo)簽頁面,重繪頻率則會大大降低。較于,能得到更完整的加速的支持。 最近做微信小程序的開發(fā)時,想做一個靠感知手機方向,使頁面上節(jié)點跟隨移動的動畫(即重力感應(yīng)視差效果)功能。結(jié)果發(fā)現(xiàn)微信小程序有一些坑: 微信小程序不支持html5的DeviceOrie...
摘要:最近做微信小程序的開發(fā)時,想做一個靠感知手機方向,使頁面上節(jié)點跟隨移動的動畫即重力感應(yīng)視差效果功能。最終實現(xiàn)的效果會有卡頓現(xiàn)象。如果是后臺標(biāo)簽頁面,重繪頻率則會大大降低。較于,能得到更完整的加速的支持。 最近做微信小程序的開發(fā)時,想做一個靠感知手機方向,使頁面上節(jié)點跟隨移動的動畫(即重力感應(yīng)視差效果)功能。結(jié)果發(fā)現(xiàn)微信小程序有一些坑: 微信小程序不支持html5的DeviceOrie...
摘要:最近做微信小程序的開發(fā)時,想做一個靠感知手機方向,使頁面上節(jié)點跟隨移動的動畫即重力感應(yīng)視差效果功能。最終實現(xiàn)的效果會有卡頓現(xiàn)象。如果是后臺標(biāo)簽頁面,重繪頻率則會大大降低。較于,能得到更完整的加速的支持。 最近做微信小程序的開發(fā)時,想做一個靠感知手機方向,使頁面上節(jié)點跟隨移動的動畫(即重力感應(yīng)視差效果)功能。結(jié)果發(fā)現(xiàn)微信小程序有一些坑: 微信小程序不支持html5的DeviceOrie...
摘要:我們在面試中經(jīng)常會遇到或提出這樣一個問題求下列代碼輸出結(jié)果通常來說這個題目的答案是本地主要考察瀏覽器的單線程和機制相關(guān)文章已經(jīng)有很多就不再贅述但是如果在開發(fā)者工具中運行結(jié)果會是什么本次討論以的開發(fā)者工具為例讓我們隨便打開一個網(wǎng)頁敲入代碼觀察 我們在javascript面試中經(jīng)常會遇到或提出這樣一個問題:求下列代碼輸出結(jié)果 setTimeout(function(){console.lo...
摘要:第二套方案,一定程度上改善了第一套方案帶來的維護成本增加的缺點,主要還是使用工具預(yù)渲染頁面,獲取到節(jié)點和樣式,保留頁面結(jié)構(gòu),覆蓋樣式,生成灰色塊蓋在原有文本圖片或者是等節(jié)點上面,最后將生成的和打包出來,就是一個帶有骨架屏的頁面。 首屏 一般情況下,在首屏數(shù)據(jù)未拿到之前,為了提升用戶的體驗,會在頁面上展示一個loading的圖層,類似下面這個showImg(https://segment...
閱讀 2434·2021-11-15 11:36
閱讀 1172·2019-08-30 15:56
閱讀 2243·2019-08-30 15:53
閱讀 1038·2019-08-30 15:44
閱讀 649·2019-08-30 14:13
閱讀 997·2019-08-30 10:58
閱讀 476·2019-08-29 15:35
閱讀 1293·2019-08-29 13:58