資訊專(zhuān)欄INFORMATION COLUMN
摘要：有這樣一道關(guān)于的面試題，描述如下頁(yè)面上有一個(gè)輸入框，兩個(gè)按鈕，按鈕和按鈕，點(diǎn)擊或者分別會(huì)發(fā)送一個(gè)異步請(qǐng)求，請(qǐng)求完成后，結(jié)果會(huì)顯示在輸入框中。大家有其他方法或者問(wèn)題可以留言，或者直接發(fā)送消息。
有這樣一道關(guān)于promise的面試題，描述如下：
頁(yè)面上有一個(gè)輸入框，兩個(gè)按鈕，A按鈕和B按鈕，點(diǎn)擊A或者B分別會(huì)發(fā)送一個(gè)異步請(qǐng)求，請(qǐng)求完成后，結(jié)果會(huì)顯示在輸入框中。
題目要求，用戶(hù)隨機(jī)點(diǎn)擊A和B多次，要求輸入框顯示結(jié)果時(shí)，按照用戶(hù)點(diǎn)擊的順序顯示，舉例：
用戶(hù)點(diǎn)擊了一次A，然后點(diǎn)擊一次B，又點(diǎn)擊一次A，輸入框顯示結(jié)果的順序?yàn)橄蕊@示A異步請(qǐng)求結(jié)果，再次顯示B的請(qǐng)求結(jié)果，最后再次顯示A的請(qǐng)求結(jié)果。
UI界面如圖：
這個(gè)需求該如何用promise來(lái)實(shí)現(xiàn)呢？代碼如下：
//dom元素
var a = document.querySelector("#a")
var b = document.querySelector("#b")
var i = document.querySelector("#ipt");
//全局變量p保存promie實(shí)例
var P = Promise.resolve();
a.onclick = function(){
//將事件過(guò)程包裝成一個(gè)promise并通過(guò)then鏈連接到
//全局的Promise實(shí)例上，并更新全局變量，這樣其他點(diǎn)擊
//就可以拿到最新的Promies執(zhí)行鏈
P = P.then(function(){
//then鏈里面的函數(shù)返回一個(gè)新的promise實(shí)例
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)
})
})
}
我們用定時(shí)器來(lái)模擬異步請(qǐng)求，仔細(xì)于閱讀代碼我們發(fā)現(xiàn)，在全局我們定義了一個(gè)全局P，P保存了一個(gè)promise的實(shí)例。
然后再觀察點(diǎn)擊事件的代碼，用戶(hù)每次點(diǎn)擊按鈕時(shí)，我們?cè)谑录性L問(wèn)全局Promise實(shí)例，將異步操作包裝到成新的Promise實(shí)例，然后通過(guò)全局Promise實(shí)例的then方法來(lái)連接這些行為。
連接的時(shí)候需要注意，then鏈的函數(shù)中必須將新的promise實(shí)例進(jìn)行返回，不然就會(huì)執(zhí)行順序就不正確了。
需要注意的是，then鏈連接完成后，我們需要更新全局的P變量，只有這樣，其它點(diǎn)擊事件才能得到最新的Promise的執(zhí)行鏈。
這樣每次用戶(hù)點(diǎn)擊按鈕就不需要關(guān)心回調(diào)執(zhí)行時(shí)機(jī)了，因?yàn)閜romise的then鏈會(huì)按照其連接順序依次執(zhí)行。
這樣就能保證用戶(hù)的點(diǎn)擊順序和promise的執(zhí)行順序一致了。
大家有其他方法或者問(wèn)題可以留言，或者直接發(fā)送消息。
歡迎關(guān)注、轉(zhuǎn)發(fā)、點(diǎn)擊好看
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102172.html
摘要：按照要求實(shí)現(xiàn)函數(shù)，把傳進(jìn)去的函數(shù)數(shù)組按順序先后執(zhí)行，并且把返回的數(shù)據(jù)先后放到數(shù)組中。例子中我們是按順序執(zhí)行的，但是輸出的結(jié)果卻是，對(duì)于這些異步函數(shù)來(lái)說(shuō)，并不會(huì)按順序執(zhí)行完一個(gè)，再執(zhí)行后一個(gè)。 按照要求：實(shí)現(xiàn) mergePromise 函數(shù)，把傳進(jìn)去的函數(shù)數(shù)組按順序先后執(zhí)行，并且把返回的數(shù)據(jù)先后放到數(shù)組 data 中。 代碼如下：const timeout = ms => new Pro...
摘要：面試題來(lái)源于網(wǎng)絡(luò)，看一下高級(jí)前端的面試題，可以知道自己和高級(jí)前端的差距。 面試題來(lái)源于網(wǎng)絡(luò)，看一下高級(jí)前端的面試題，可以知道自己和高級(jí)前端的差距。有些面試題會(huì)重復(fù)。 使用過(guò)的koa2中間件 koa-body原理 介紹自己寫(xiě)過(guò)的中間件 有沒(méi)有涉及到Cluster 介紹pm2 master掛了的話pm2怎么處理 如何和MySQL進(jìn)行通信 React聲明周期及自己的理解 如何...
摘要：面試的公司分別是阿里網(wǎng)易滴滴今日頭條有贊挖財(cái)滬江餓了么攜程喜馬拉雅兌吧微醫(yī)寺庫(kù)寶寶樹(shù)?？低暷⒐浇挚峒覙?lè)百分點(diǎn)和海風(fēng)教育。 （關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)） 本人于7-8月開(kāi)始準(zhǔn)備面試，過(guò)五關(guān)斬六將，最終抱得網(wǎng)易歸，深深感受到高級(jí)前端面試的套路。以下是自己整理的面試題匯總，不敢藏私，統(tǒng)統(tǒng)貢獻(xiàn)出來(lái)。 面試的公司分...
閱讀 2555·2023-04-26 00:57
閱讀 925·2021-11-25 09:43
閱讀 2229·2021-11-11 16:55
閱讀 2241·2019-08-30 15:53
閱讀 3604·2019-08-30 15:52
閱讀 1472·2019-08-30 14:10
閱讀 3389·2019-08-30 13:22
閱讀 1221·2019-08-29 11:18
