一個有意思的面試題解答

今天在知乎上看見一個頗有意思的面試題，看了下下面的評論，貌似還有不少人不會寫。題目以下：

 

某個應用模塊由文本框 input，以及按鈕 A，按鈕 B 組成。點擊按鈕 A，會向地址 urlA 發出一個 ajax 請求，並將返回的字符串填充到 input 中（覆蓋 input 中原有的數據），點擊按鈕 B，會向地址 urlB 發出一個 ajax 請求，並將返回的字符串填充到 input 中（覆蓋 input 中原有的數據）。

當用戶依次點擊按鈕 A、B 的時候，預期的效果是 input 依次被 urlA、urlB 返回的數據填充，可是因爲到 urlA 的請求返回比較慢，致使 urlB 返回的數據被 urlA 返回的數據覆蓋了，與用戶預期的順序不一致。

請問如何設計代碼，解決這個問題？

做者：欲三更
連接：https://zhuanlan.zhihu.com/p/25259283
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

 

看到這個題第一反應是rxjs。可是總是用別的框架解決問題，本身以爲是一種很蛋疼的作法，下來我就給出本身的解法。

var next=(function (){ 
  var promise=Promise.resolve(); 
  return (url)=>{ 
    promise=promise.then(()=>{ 
        return fetch(url).then((res)=>{
          $('.input').val(url); 
          console.log(url);
        });
    }); 
  };
})(); 

$('.but1').click(()=>{ 
  next('url1'); 
}); 
$('.but2').click(()=>{ 
  next('url2'); 
}); 

$('.but3').click(()=>{ 
  next('url3'); 
});           

　　下面是jsbin地址：http://jsbin.com/puninopobu/edit?html,js,output；

　　因爲沒有後臺，因此把ajax換成了setTimeout來做爲演示