題圖 By Clm From Bing

有這樣一道關(guān)于promise的面試題，描述如下：

頁面上有一個輸入框，兩個按鈕，A按鈕和B按鈕，點擊A或者B分別會發(fā)送一個異步請求，請求完成后，結(jié)果會顯示在輸入框中。

題目要求，用戶隨機點擊A和B多次，要求輸入框顯示結(jié)果時，按照用戶點擊的順序顯示，舉例：

用戶點擊了一次A，然后點擊一次B，又點擊一次A，輸入框顯示結(jié)果的順序為先顯示A異步請求結(jié)果，再次顯示B的請求結(jié)果，最后再次顯示A的請求結(jié)果。

UI界面如圖：

這個需求該如何用promise來實現(xiàn)呢？代碼如下：

? ? ? ?//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執(zhí)行鏈
? ? ? ? ? ?P = P.then(function(){
? ? ? ? ? ? ? ?//then鏈里面的函數(shù)返回一個新的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)
? ? ? ? ? ? ? ?})
? ? ? ? ? ?})
? ? ? ?}

我們用定時器來模擬異步請求，仔細于閱讀代碼我們發(fā)現(xiàn)，在全局我們定義了一個全局P，P保存了一個promise的實例。

然后再觀察點擊事件的代碼，用戶每次點擊按鈕時，我們在事件中訪問全局Promise實例，將異步操作包裝到成新的Promise實例，然后通過全局Promise實例的then方法來連接這些行為。

連接的時候需要注意，then鏈的函數(shù)中必須將新的promise實例進行返回，不然就會執(zhí)行順序就不正確了。

需要注意的是，then鏈連接完成后，我們需要更新全局的P變量，只有這樣，其它點擊事件才能得到最新的Promise的執(zhí)行鏈。

這樣每次用戶點擊按鈕就不需要關(guān)心回調(diào)執(zhí)行時機了，因為promise的then鏈會按照其連接順序依次執(zhí)行。

這樣就能保證用戶的點擊順序和promise的執(zhí)行順序一致了。

大家有其他方法或者問題可以留言，或者直接發(fā)送消息。

歡迎關(guān)注、轉(zhuǎn)發(fā)、點擊好看

總結(jié)

以上是生活随笔為你收集整理的定时器和promise_Promise面试题，控制异步流程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。