資訊專欄INFORMATION COLUMN
摘要：有這樣一道關(guān)于的面試題，描述如下頁面上有一個輸入框，兩個按鈕，按鈕和按鈕，點擊或者分別會發(fā)送一個異步請求，請求完成后，結(jié)果會顯示在輸入框中。大家有其他方法或者問題可以留言，或者直接發(fā)送消息。
有這樣一道關(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ā)、點擊好看
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102172.html
摘要：按照要求實現(xiàn)函數(shù)，把傳進去的函數(shù)數(shù)組按順序先后執(zhí)行，并且把返回的數(shù)據(jù)先后放到數(shù)組中。例子中我們是按順序執(zhí)行的，但是輸出的結(jié)果卻是，對于這些異步函數(shù)來說，并不會按順序執(zhí)行完一個，再執(zhí)行后一個。 按照要求：實現(xiàn) mergePromise 函數(shù)，把傳進去的函數(shù)數(shù)組按順序先后執(zhí)行，并且把返回的數(shù)據(jù)先后放到數(shù)組 data 中。 代碼如下：const timeout = ms => new Pro...
摘要：面試題來源于網(wǎng)絡(luò)，看一下高級前端的面試題，可以知道自己和高級前端的差距。 面試題來源于網(wǎng)絡(luò)，看一下高級前端的面試題，可以知道自己和高級前端的差距。有些面試題會重復(fù)。 使用過的koa2中間件 koa-body原理 介紹自己寫過的中間件 有沒有涉及到Cluster 介紹pm2 master掛了的話pm2怎么處理 如何和MySQL進行通信 React聲明周期及自己的理解 如何...
摘要：面試的公司分別是阿里網(wǎng)易滴滴今日頭條有贊挖財滬江餓了么攜程喜馬拉雅兌吧微醫(yī)寺庫寶寶樹海康威視蘑菇街酷家樂百分點和海風(fēng)教育。 （關(guān)注福利，關(guān)注本公眾號回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實戰(zhàn)、面試指導(dǎo)） 本人于7-8月開始準(zhǔn)備面試，過五關(guān)斬六將，最終抱得網(wǎng)易歸，深深感受到高級前端面試的套路。以下是自己整理的面試題匯總，不敢藏私，統(tǒng)統(tǒng)貢獻出來。 面試的公司分...
閱讀 2538·2023-04-26 00:57
閱讀 911·2021-11-25 09:43
閱讀 2221·2021-11-11 16:55
閱讀 2207·2019-08-30 15:53
閱讀 3592·2019-08-30 15:52
閱讀 1459·2019-08-30 14:10
閱讀 3379·2019-08-30 13:22
閱讀 1209·2019-08-29 11:18
