題目:

某個應(yīng)用模塊由文本框 input，以及按鈕 A，按鈕 B 組成。點(diǎn)擊按鈕 A，會向地址 urlA 發(fā)出一個 ajax 請求，并將返回的字符串填充到 input 中（覆蓋 input 中原有的數(shù)據(jù)），點(diǎn)擊按鈕 B，會向地址 urlB 發(fā)出一個 ajax 請求，并將返回的字符串填充到 input 中（覆蓋 input 中原有的數(shù)據(jù)）。

當(dāng)用戶依次點(diǎn)擊按鈕 A、B 的時(shí)候，預(yù)期的效果是 input 依次被 urlA、urlB 返回的數(shù)據(jù)填充，但是由于到 urlA 的請求返回比較慢，導(dǎo)致 urlB 返回的數(shù)據(jù)被 urlA 返回的數(shù)據(jù)覆蓋了，與用戶預(yù)期的順序不一致。

請問如何設(shè)計(jì)代碼，解決這個問題？
原文見這里:如果你想靠前端技術(shù)還房貸，你不能連這個都不會

使用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對象,并且這個對象的狀態(tài)為完成狀態(tài),然后為按鈕1綁定點(diǎn)擊事件:

當(dāng)點(diǎn)擊按鈕1的時(shí)候在promise的then回掉里面執(zhí)行ajax請求,并重新給promise賦值.然后用同樣的方法為按鈕2綁定點(diǎn)擊事件.

當(dāng)?shù)谝淮吸c(diǎn)擊按鈕1的時(shí)候,promise為完成狀態(tài),所以直接執(zhí)行promise.then方法,并且將promise.then()重新賦值給promise,然后當(dāng)點(diǎn)擊按鈕2的時(shí)候再次為promise重新賦值為promise.then,這兩個操作就相當(dāng)于每次點(diǎn)擊按鈕就為promise添加了一個then方法