有如许一道关于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的实行递次一致了。
人人有其他要领或许题目能够留言,或许直接发送音讯。
迎接关注、转发、点击悦目