成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

一個(gè)setTimeout問(wèn)題小探索

wuaiqiu / 3528人閱讀

摘要：?jiǎn)栴}之前有提到一個(gè)異步問(wèn)題，如下代碼輸出什么這是我近期遇到的一個(gè)面題。探索為什么呢首先，是異步執(zhí)行的。如果不考慮兼容性，我們可以使用的，把每個(gè)變成一個(gè)局部變量。假設(shè)的時(shí)間是一個(gè)隨機(jī)數(shù)。

問(wèn)題

之前有提到一個(gè)異步問(wèn)題，如下代碼輸出什么：

for(var i = 0;i<10;i++){
  setTimeout(function(){
    console.log(i);  
  },1000);
}

這是我近期遇到的一個(gè)面題。當(dāng)時(shí)我并不知道。不過(guò)后來(lái)面試官告訴我，setTimeout是異步執(zhí)行的。并且告訴了我答案。后來(lái)在群里邊討論，明白了。會(huì)輸出10個(gè)10。

探索

為什么呢？首先，setTimeout是異步執(zhí)行的。所以在setTimeout執(zhí)行之前，全局變量i早就已經(jīng)變成了10。

那么如何解決能讓他輸出0-9呢？其實(shí)要解決的就是：在使用i的時(shí)候保證i的值還是我們當(dāng)時(shí)希望的那個(gè)值。

如果不考慮兼容性，我們可以使用es6的let，把每個(gè)i變成一個(gè)局部變量。代碼如下：

for(let i = 0;i<10;i++){
  setTimeout(function(){
    console.log(i);  
  },1000);
}

如果要考慮兼容性，那么我們用一個(gè)匿名函數(shù)，把i當(dāng)做參數(shù)傳進(jìn)去，這樣我們?cè)儆玫膇就是局部變量了。不會(huì)受到外邊的影響了。代碼如下：

for(var i = 0;i<10;i++){
  (function(i){
    setTimeout(function(){
      console.log(i);  
    },1000);
  })(i)
}

如果使用promise，那么我們可以使用如下寫(xiě)法：

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í)間是一個(gè)隨機(jī)數(shù)。而我們要在所有數(shù)字都打印完畢再去做一些操作，那么該怎么做呢？
具體可以參見(jiàn)：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é)果不一樣。所以，有時(shí)候極客玩玩就是了，認(rèn)真你就輸啦-.-

總結(jié)

以前我偏執(zhí)的認(rèn)為，能做出東西就行了?；A(chǔ)不重要。所以我總是一只停留在做東西的階段。但是后來(lái)反過(guò)來(lái)想：假設(shè)你想買車，那么你會(huì)選一個(gè)對(duì)汽車參數(shù)很熟的銷售員還是選擇一個(gè)你問(wèn)什么問(wèn)題他都說(shuō)查查再回答你的銷售員呢？答案是肯定的。所以說(shuō)，可能公司招人也一樣吧。

但是，這些問(wèn)題真的有用嗎？沒(méi)錯(cuò)，我都有很多問(wèn)題沒(méi)回答好，如果是為了準(zhǔn)備一次很nice的面試，我大可以特意的多跑幾家，然后把遇到的有問(wèn)題的面試題都總結(jié)下來(lái)。不會(huì)的再去查詢，我想翻來(lái)覆去也沒(méi)多少基礎(chǔ)可問(wèn)吧？就像找個(gè)美工就問(wèn)：你會(huì)切圖嘛？這些稍微花點(diǎn)時(shí)間都能學(xué)會(huì)的問(wèn)題。個(gè)人覺(jué)得沒(méi)特別大的意義。

（本文摘取自我的博客：http://79px.com/blog/57cd347b...）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90980.html

相關(guān)文章

  • 從微信小程序重力感應(yīng)API到requestAnimationFrame探索實(shí)現(xiàn)

    摘要：最近做微信小程序的開(kāi)發(fā)時(shí)，想做一個(gè)靠感知手機(jī)方向，使頁(yè)面上節(jié)點(diǎn)跟隨移動(dòng)的動(dòng)畫(huà)即重力感應(yīng)視差效果功能。最終實(shí)現(xiàn)的效果會(huì)有卡頓現(xiàn)象。如果是后臺(tái)標(biāo)簽頁(yè)面，重繪頻率則會(huì)大大降低。較于，能得到更完整的加速的支持。 最近做微信小程序的開(kāi)發(fā)時(shí)，想做一個(gè)靠感知手機(jī)方向，使頁(yè)面上節(jié)點(diǎn)跟隨移動(dòng)的動(dòng)畫(huà)（即重力感應(yīng)視差效果）功能。結(jié)果發(fā)現(xiàn)微信小程序有一些坑： 微信小程序不支持html5的DeviceOrie...

    JinB 評(píng)論0 收藏0

  • 從微信小程序重力感應(yīng)API到requestAnimationFrame探索實(shí)現(xiàn)

    摘要：最近做微信小程序的開(kāi)發(fā)時(shí)，想做一個(gè)靠感知手機(jī)方向，使頁(yè)面上節(jié)點(diǎn)跟隨移動(dòng)的動(dòng)畫(huà)即重力感應(yīng)視差效果功能。最終實(shí)現(xiàn)的效果會(huì)有卡頓現(xiàn)象。如果是后臺(tái)標(biāo)簽頁(yè)面，重繪頻率則會(huì)大大降低。較于，能得到更完整的加速的支持。 最近做微信小程序的開(kāi)發(fā)時(shí)，想做一個(gè)靠感知手機(jī)方向，使頁(yè)面上節(jié)點(diǎn)跟隨移動(dòng)的動(dòng)畫(huà)（即重力感應(yīng)視差效果）功能。結(jié)果發(fā)現(xiàn)微信小程序有一些坑： 微信小程序不支持html5的DeviceOrie...

    sarva 評(píng)論0 收藏0

  • 從微信小程序重力感應(yīng)API到requestAnimationFrame探索實(shí)現(xiàn)

    摘要：最近做微信小程序的開(kāi)發(fā)時(shí)，想做一個(gè)靠感知手機(jī)方向，使頁(yè)面上節(jié)點(diǎn)跟隨移動(dòng)的動(dòng)畫(huà)即重力感應(yīng)視差效果功能。最終實(shí)現(xiàn)的效果會(huì)有卡頓現(xiàn)象。如果是后臺(tái)標(biāo)簽頁(yè)面，重繪頻率則會(huì)大大降低。較于，能得到更完整的加速的支持。 最近做微信小程序的開(kāi)發(fā)時(shí)，想做一個(gè)靠感知手機(jī)方向，使頁(yè)面上節(jié)點(diǎn)跟隨移動(dòng)的動(dòng)畫(huà)（即重力感應(yīng)視差效果）功能。結(jié)果發(fā)現(xiàn)微信小程序有一些坑： 微信小程序不支持html5的DeviceOrie...

    soasme 評(píng)論0 收藏0

  • 一個(gè)經(jīng)典的javascript面試題的新探索

    摘要：我們?cè)诿嬖囍薪?jīng)常會(huì)遇到或提出這樣一個(gè)問(wèn)題求下列代碼輸出結(jié)果通常來(lái)說(shuō)這個(gè)題目的答案是本地主要考察瀏覽器的單線程和機(jī)制相關(guān)文章已經(jīng)有很多就不再贅述但是如果在開(kāi)發(fā)者工具中運(yùn)行結(jié)果會(huì)是什么本次討論以的開(kāi)發(fā)者工具為例讓我們隨便打開(kāi)一個(gè)網(wǎng)頁(yè)敲入代碼觀察 我們?cè)趈avascript面試中經(jīng)常會(huì)遇到或提出這樣一個(gè)問(wèn)題:求下列代碼輸出結(jié)果 setTimeout(function(){console.lo...

    K_B_Z 評(píng)論0 收藏0

  • 小程序構(gòu)建骨架屏的探索

    摘要：第二套方案，一定程度上改善了第一套方案帶來(lái)的維護(hù)成本增加的缺點(diǎn)，主要還是使用工具預(yù)渲染頁(yè)面，獲取到節(jié)點(diǎn)和樣式，保留頁(yè)面結(jié)構(gòu)，覆蓋樣式，生成灰色塊蓋在原有文本圖片或者是等節(jié)點(diǎn)上面，最后將生成的和打包出來(lái)，就是一個(gè)帶有骨架屏的頁(yè)面。 首屏 一般情況下，在首屏數(shù)據(jù)未拿到之前，為了提升用戶的體驗(yàn)，會(huì)在頁(yè)面上展示一個(gè)loading的圖層，類似下面這個(gè)showImg(https://segment...

    shiweifu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<