Promise面試題,控制非同步流程
有這樣一道關於promise的面試題,描述如下:
頁面上有一個輸入框,兩個按鈕,A按鈕和B按鈕,點選A或者B分別會發送一個非同步請求,請求完成後,結果會顯示在輸入框中。
題目要求,使用者隨機點選A和B多次,要求輸入框顯示結果時,按照使用者點選的順序顯示,舉例:
使用者點選了一次A,然後點選一次B,又點選一次A,輸入框顯示結果的順序為先顯示A非同步請求結果,再次顯示B的請求結果,最後再次顯示A的請求結果。
UI介面如圖:
這個需求該如何用promise來實現呢?程式碼如下:
//dom元素 var a = document.querySelector("#a") var b = document.querySelector("#b") var i = document.querySelector("#ipt"); //全域性變數p儲存promie例項 var P = Promise.resolve(); a.onclick= function(){ //將事件過程包裝成一個promise並通過then鏈連線到 //全域性的Promise例項上,並更新全域性變數,這樣其他點選 //就可以拿到最新的Promies執行鏈 P = P.then(function(){ //then鏈裡面的函式返回一個新的promise例項 return new Promise(function(resolve,reject){ setTimeout(function(){ resolve() i.value = "a"; },1000) }) }) } b.onclick= function(){ P = P.then(function(){ return new Promise(function(resolve,reject){ setTimeout(function(){ resolve() console.log("b") i.value = "b" },2000) }) }) }
我們用定時器來模擬非同步請求,仔細於閱讀程式碼我們發現,在全域性我們定義了一個全域性P,P儲存了一個promise的例項。
然後再觀察點選事件的程式碼,使用者每次點選按鈕時,我們在事件中訪問全域性Promise例項,將非同步操作包裝到成新的Promise例項,然後通過全域性Promise例項的then方法來連線這些行為。
連線的時候需要注意,then鏈的函式中必須將新的promise例項進行返回,不然就會執行順序就不正確了。
需要注意的是,then鏈連線完成後,我們需要更新全域性的P變數,只有這樣,其它點選事件才能得到最新的Promise的執行鏈。
這樣每次使用者點選按鈕就不需要關心回撥執行時機了,因為promise的then鏈會按照其連線順序依次執行。
這樣就能保證使用者的點選順序和promise的執行順序一致了。
大家有其他方法或者問題可以留言,或者直接傳送訊息。
歡迎關注、轉發、點選好看