同步異步和事件

時間 2019-11-13

標籤同步異步事件简体版

原文原文鏈接

同步和異步事件

瀏覽器提供了同步和異步機制 JS是單線程的，提供了兩個隊列，一個是主隊列（放同步代碼），一個是異步隊列隊列池。ajax

同步

全部的代碼按順序執行，每一部分執行完後才能執行下面的代碼。promise

異步

這塊代碼執行後，能夠去作其餘事情，等這塊代碼執行完後，再回來處理這裏的事項。瀏覽器

異步性能會比較高
- 回調函數 ajax 定時器時間

區別

先執行同步的代碼，再執行異步的代碼。
同步代碼執行結束後纔會去執行異步代碼

默認定時器間隔時間 5~10ms異步

問題

異步回調地獄
所有寫成同步又會形成代碼阻塞async

解決：promise處理 異步代碼當成同步來寫（能夠用async + await解決）

 
  function Promise(callback){  
 

this.x = 1;

callback();

}

Promise

Promise是JS內置的構造函數函數

參數是一個回調函數
- 回調函數有兩個參數：
  - resolve(表示執行成功的回調)
  - reject(表示執行失敗的回調)
    then方法 Promise類原型上的方法
then有兩個參數
- 第一個是成功回調
- 第二個參數表示失敗的回調
then方法的返回值
- Promise類的實例，因此能夠繼續調用then方法
- //除過報錯全成功只有手動拋出異常狀態纔會變成失敗的狀態（前提是沒有再返回Promise對象）
  Promise有三種狀態
第一種是pending（等待狀態）
第二種是fulfilled(成功的狀態)
第三種是rejected(失敗的狀態)

事件

事件綁定：事件（行爲）發生時作些具體的事情（給事件綁定行爲）
綁定事件分爲DOM0級事件綁定和 DOM2級事件綁定性能

DOM0級事件綁定問題：對同一元素，同一事件綁定多個行爲時，後面的行爲會覆蓋前面的行爲，最後只會執行最後一次綁定的行爲ui

DOM0級事件綁定
oDiv.onclick = function(){alert(1)}
- 事件行爲移除
  oDiv.onclick = null
DOM2級事件綁定
oDiv.addEventListener('click',function(){alert(1)},false);
- 參數1：事件類型
- 參數2：事件綁定的行爲
- 參數3：事件傳播的方式
  oDiv.removeEventListener('click',fn,false);
IE低版本瀏覽器6~8：oDiv.attachEvent('onclick',fn);，沒有作重複綁定的處理
oDiv.detachEvent('onclick',fn);

DOM2級綁定 addEventListener和attachEvent
IE沒有作重複綁定處理。DOM2級事件會對同一個元素綁定同一個事件綁定屢次時只綁定一次。
標準瀏覽器下事件綁定行爲中的this是綁定的元素 IE事件綁定行爲中是window
IE下事件綁定行爲執行的順序是亂的，而標準瀏覽器是按照前後綁定的順序執行this

事件對象

瀏覽器記錄了事件相關的信息spa

//自己存在，用來存儲事件相關的信息也能夠用arguments[0]接收
標準瀏覽器放在參數裏接收
ie6~8:經過window.event接收
e = e || window.event

 
  let oDiv = document.getElementsByClassName('box')[0];  
 

   oDiv.onclick = 
  function (e) {//自己存在，用來存儲事件相關的信息 也能夠用arguments[0]接收  
 

console.log(e.clientX);//到可視窗口左邊的距離

}

e.clientX：到可視窗口左邊的距離
e.clientY：到可視窗口上邊的距離
e.pageY ：到文檔左邊的距離（包含滾動條卷出去的高度） e.clientY + document.documentElement,scrollTop||docment.body.scrollTop
e.target: 事件源事件綁定的元素
e.preventDefault 阻止默認行爲
- ie低版本瀏覽器：e.returnValue = false
e.stopPropagation 阻止冒泡
- ie低版本瀏覽器：e.cancleBubble = true