javascript事件循環eventloop的示例分析

小編給大家分享一下javascript事件循環event loop的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

為平陰等地區用戶提供了全套網頁設計制作服務，及平陰網站建設行業解決方案。主營業務為網站設計制作、網站設計、平陰網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業、用心的態度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

具體如下：

js是單線程的，但是event loop的出現，使得js擁有可以處理高并發的性能。那么怎么理解event loop呢？網上百度一堆文章，什么heap，stack，micro queue，macro queue，讓初學者直接懵掉。這里采用很通俗的理解方式介紹下event loop.

event loop顧名思義是事件循環，既然是循環，那循環的是什么呢？

對于一個js文件，

1，執行當前執行上下文（初次是全局作用域）的所有同步任務，有異步任務的透出

2，執行任務隊列里第一個異步任務，

3，執行當前異步任務執行上下文的所有同步任務，有異步任務透出

從上面的執行順序可以清楚的看到循環執行的是什么，event loop循環中的循環任務是指：

執行某個執行上下文的所有同步任務，透出異步任務

看一個簡單實例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>event-loop-test</title>
</head>
<body>
  <script>
    setTimeout(function(){
      console.log('測試定時事件循環')
      new Promise(function(resolve,reject){
        resolve('內層數據')
      }).then(function(data){
        console.log(data)
      })
      console.log('測試測試測試111')
      for(var i = 0; i<5000; i++){
        console.log('異步任務中的耗時同步任務')
      }
      setTimeout(function(){
        console.log(22222)  //這里透出的異步任務會在testPromise之后，在上面的for循環執行過后，testPromise已經透出異步任務，放到隊列中
      },0)
    },0)
    for(var i = 0; i<5000; i++){
      console.log('測試event loop')
    }
    for(var i = 0; i<5000; i++){
      console.log('測試event loop2')
    }
    var testPromise = new Promise(function(resolve,reject){
      console.log('直接測試promiseneibu')
      setTimeout(function(){
        resolve('promise測試')
        console.log('promise內部的console') 
      },10)
    })
    testPromise.then(function(data){
      console.log(data)
    })
    console.log('我是直接運行的')
  </script>
</body>
</html>

javascript事件循環event loop的示例分析