一個setTimeout問題小探索

wuaiqiu 發布于2019-08-22 10:38 / 3494人閱讀

摘要：問題之前有提到一個異步問題，如下代碼輸出什么這是我近期遇到的一個面題。探索為什么呢首先，是異步執行的。如果不考慮兼容性，我們可以使用的，把每個變成一個局部變量。假設的時間是一個隨機數。

問題

之前有提到一個異步問題，如下代碼輸出什么：

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

這是我近期遇到的一個面題。當時我并不知道。不過后來面試官告訴我，setTimeout是異步執行的。并且告訴了我答案。后來在群里邊討論，明白了。會輸出10個10。

探索

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

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

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

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

如果要考慮兼容性，那么我們用一個匿名函數，把i當做參數傳進去，這樣我們再用的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方法更麻煩了。但是適用于更復雜的需求了。假設setTimeout的時間是一個隨機數。而我們要在所有數字都打印完畢再去做一些操作，那么該怎么做呢？
具體可以參見：https://segmentfault.com/a/11...

執行效率上的考慮：

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的執行結果如下：

a: 0.35009765625ms
b: 0.348876953125ms
c: 0.880126953125ms

注意：可能不同系統不同環境的執行結果不一樣。所以，有時候極客玩玩就是了，認真你就輸啦-.-

總結

以前我偏執的認為，能做出東西就行了。基礎不重要。所以我總是一只停留在做東西的階段。但是后來反過來想：假設你想買車，那么你會選一個對汽車參數很熟的銷售員還是選擇一個你問什么問題他都說查查再回答你的銷售員呢？答案是肯定的。所以說，可能公司招人也一樣吧。

但是，這些問題真的有用嗎？沒錯，我都有很多問題沒回答好，如果是為了準備一次很nice的面試，我大可以特意的多跑幾家，然后把遇到的有問題的面試題都總結下來。不會的再去查詢，我想翻來覆去也沒多少基礎可問吧？就像找個美工就問：你會切圖嘛？這些稍微花點時間都能學會的問題。個人覺得沒特別大的意義。

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

云服務器 GPU云服務器一個問題一個 ++問題一個小程序 setTimeout

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90980.html

從微信小程序重力感應API到requestAnimationFrame探索實現

摘要：最近做微信小程序的開發時，想做一個靠感知手機方向，使頁面上節點跟隨移動的動畫即重力感應視差效果功能。最終實現的效果會有卡頓現象。如果是后臺標簽頁面，重繪頻率則會大大降低。較于，能得到更完整的加速的支持。最近做微信小程序的開發時，想做一個靠感知手機方向，使頁面上節點跟隨移動的動畫（即重力感應視差效果）功能。結果發現微信小程序有一些坑：微信小程序不支持html5的DeviceOrie...

JinB 2019-08-22 11:02 評論0 收藏0
從微信小程序重力感應API到requestAnimationFrame探索實現

摘要：最近做微信小程序的開發時，想做一個靠感知手機方向，使頁面上節點跟隨移動的動畫即重力感應視差效果功能。最終實現的效果會有卡頓現象。如果是后臺標簽頁面，重繪頻率則會大大降低。較于，能得到更完整的加速的支持。最近做微信小程序的開發時，想做一個靠感知手機方向，使頁面上節點跟隨移動的動畫（即重力感應視差效果）功能。結果發現微信小程序有一些坑：微信小程序不支持html5的DeviceOrie...

sarva 2019-08-21 15:06 評論0 收藏0
從微信小程序重力感應API到requestAnimationFrame探索實現

摘要：最近做微信小程序的開發時，想做一個靠感知手機方向，使頁面上節點跟隨移動的動畫即重力感應視差效果功能。最終實現的效果會有卡頓現象。如果是后臺標簽頁面，重繪頻率則會大大降低。較于，能得到更完整的加速的支持。最近做微信小程序的開發時，想做一個靠感知手機方向，使頁面上節點跟隨移動的動畫（即重力感應視差效果）功能。結果發現微信小程序有一些坑：微信小程序不支持html5的DeviceOrie...

soasme 2019-08-26 11:27 評論0 收藏0
一個經典的javascript面試題的新探索

摘要：我們在面試中經常會遇到或提出這樣一個問題求下列代碼輸出結果通常來說這個題目的答案是本地主要考察瀏覽器的單線程和機制相關文章已經有很多就不再贅述但是如果在開發者工具中運行結果會是什么本次討論以的開發者工具為例讓我們隨便打開一個網頁敲入代碼觀察我們在javascript面試中經常會遇到或提出這樣一個問題:求下列代碼輸出結果 setTimeout(function(){console.lo...

K_B_Z 2019-08-21 14:35 評論0 收藏0
小程序構建骨架屏的探索

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

shiweifu 2019-08-23 10:39 評論0 收藏0