從一個for循環分析JS的事件處理機制

rollback 發布于2019-08-23 18:23 / 380人閱讀

摘要：最近面試的時候，經常會遇到這類問題，比如你怎么理解的事件處理機制什么任務優先級高，什么任務會在主進程中我覺得從一個例子出發可以很好的從各方面的去分析，這樣也會是一個比較滿意的答案常見的例子這里我們如果不去思考一下很容易得出這類答案，仔細思

最近面試的時候，經常會遇到這類問題，比如：你怎么理解JS的事件處理機制？什么任務優先級高，什么任務會在主進程中？

   我覺得從一個例子出發可以很好的從各方面的去分析，這樣也會是一個比較滿意的答案
   常見的例子：
               for(var i = 0; i<10; i++) {
                   setTimeout(()=>{
                       console.log(i)
                   },0)
               }
         這里我們如果不去思考一下很容易得出 0-9 這類答案，仔細思考就會發現這里輸出的是10次10 
         這里我們可以先從JS的處理機制先說起，在JS的處理機制里 同步最高>異步>回調函數
         
         那么這里我們就很容易理解了，那在執行中順序就是，先執行完同步代碼for循環，然后在0ms后執行異步代碼setTimeout。
         因為在執行的時候setTimeout函數會去找i這個變量，但是由于i在for里面執行完之后已經變為10，由于是var聲明對于settimeout而言是全局變量，所以打印了10次10
         那如果需要實現打印0-9的話呢？
         
         第一種方法：使用ES6中的let 很容去解決作用域的問題
         如果只用ES5的方法呢，我們可以用這樣實現
         for(var i = 0; i<10; i++) {
             (function(i){
              setTimeout(()=>{
                       console.log(i)
                   },0)
             })(i)                      
            }
         
         在這里去執行**立即執行函數**，它會迫使每次進入循環之前都會立即去執行代碼，從而保證得到i都是不一樣的

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

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

由setTimeout深入JavaScript執行環境的異步機制

摘要：圖片轉引自的演講和兩個定時器中回調的執行邏輯便是典型的機制。異步編程關于異步編程我的理解是，在執行環境所提供的異步機制之上，在應用編碼層面上實現整體流程控制的異步風格。問題背景在一次開發任務中，需要實現如下一個餅狀圖動畫，基于canvas進行繪圖，但由于對于JS運行環境中異步機制的不了解，所以遇到了一個棘手的問題，始終無法解決，之后在與同事交流之后才恍然大悟。問題的根節在于經典的J...

codeGoogle 2019-08-21 18:29 評論0 收藏0
前端校招準備系列--js中的setTimeout到底是什么？

摘要：瀏覽器是多進程的，而瀏覽器的內核渲染進程是多線程的。如果已經將回調函數放進任務隊列，但是主線程正在執行一個非常耗時的任務，當這個任務執行完畢后，主線程去任務隊列中取任務，這個時候，就會出現連續執行的情況，也就是說相當于失效了。前言 ??在刷筆試題的時候，經常會碰到setTimeout的問題，只知道這個是設置定時器；但是考察的重點一般是在一個方法中包含了定時器，定時器中的打印和方法中打...

Godtoy 2019-08-23 13:41 評論0 收藏0
JavaScript執行機制、事件循環

摘要：曾經的理解首先，是單線程語言，也就意味著同一個時間只能做一件事，那么為什么不是多線程呢這樣還能提高效率啊假定同時有兩個線程，一個線程在某個節點上編輯了內容，而另一個線程刪除了這個節點，這時瀏覽器就很懵逼了，到底以執行哪個操作呢所以，設計者把 Event Loop曾經的理解首先，JS是單線程語言，也就意味著同一個時間只能做一件事，那么為什么JavaScript不是多線程呢？這樣還能提...

rose 2019-08-22 13:59 評論0 收藏0
前端性能優化指南

摘要：前端性能優化指南優化緩存異步并不等于即時。操作性能問題主要有以下原因。發生在之前，所以相對來說會造成更多性能損耗。新引擎還對對象屬性訪問做了優化，解決方案叫，簡稱。代價是前置的掃描類型編譯優化。數組，，閉包變量不在優化范疇之列。前端性能優化指南 AJAX優化緩存AJAX：異步并不等于即時。請求使用GET：當使用XMLHttpRequest時，而URL長度不到2K...

Pink 2019-08-21 10:38 評論0 收藏0
Javascript事件循環入門到“忘記”（一）.md

摘要：中叫做調用棧先進后出，后進先出。如下圖這是典型的內存溢出，可能會出現在某些場景下需要遞歸，但業務邏輯中的判斷又沒能正常計算進入到預設情況，于是調用棧中不斷進入，又無法執行完，就造成內存溢出了。本文主要介紹Javascript事件循環在瀏覽器上的一些特性和應用介紹。 Javascript小知識 JavaScript的并發模型基于事件循環(Event Loop)。這個模型與像C或者Jav...

codeGoogle 2019-08-23 12:48 評論0 收藏0