一个有意思的面试题解答

今天在知乎上看见一个颇有意思的面试题，看了下下面的评论，貌似还有不少人不会写。题目以下：

 

某个应用模块由文本框 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来做为演示