一个有意思的面试题解答

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

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