题目:
某个应用模块由文本框 input，以及按钮 A，按钮 B 组成。点击按钮 A，会向地址 urlA 发出一个 ajax 请求，并将返回的字符串填充到 input 中（覆盖 input 中原有的数据），点击按钮 B，会向地址 urlB 发出一个 ajax 请求，并将返回的字符串填充到 input 中（覆盖 input 中原有的数据）。
当用户依次点击按钮 A、B 的时候，预期的效果是 input 依次被 urlA、urlB 返回的数据填充，但是由于到 urlA 的请求返回比较慢，导致 urlB 返回的数据被 urlA 返回的数据覆盖了，与用户预期的顺序不一致。
请问如何设计代码，解决这个问题？
原文见这里:如果你想靠前端技术还房贷，你不能连这个都不会
使用promise的解决方法如下:
var promise = Promise.resolve()
$('.btn1').click(() => {
promise = promise.then(() => {
return new Promise((reslove) => {
$.ajax({
url: 'url1',
success(res1) {
$('.input').val(res1)
reslove()
}
})
})
})
})
$('.btn2').click(() => {
promise = promise.then(() => {
return new Promise((reslove) => {
$.ajax({
url: 'url2',
success(res2) {
$('.input').val(res2)
reslove()
}
})
})
})
})
思路分析:
先定义一个全局的promise对象,并且这个对象的状态为完成状态,然后为按钮1绑定点击事件:
当点击按钮1的时候在promise的then回掉里面执行ajax请求,并重新给promise赋值.然后用同样的方法为按钮2绑定点击事件.
当第一次点击按钮1的时候,promise为完成状态,所以直接执行promise.then方法,并且将promise.then()重新赋值给promise,然后当点击按钮2的时候再次为promise重新赋值为promise.then,这两个操作就相当于每次点击按钮就为promise添加了一个then方法
