在前端，输入搜索是一个必不可少的功能，最常见的是下拉输入选择框，通过输入框输入值，监听input的keyup事件，向后端发起请求，拿到数据显示在下拉框中以便让用户选择。

上面的代码虽然实现了输入搜索的功能，但是马上会发现有一个问题：接口请求冗余。

因为keyup事件是每一次按键都会触发，因此连续输入的时候会不断发起请求，导致输入n次按键会请求n次接口。举个栗子，假如需要搜索rxjs，在上面的代码中，便会发起搜索值为r、rx、rxj、rxjs的四次请求，产生了三次接口冗余，同时这种频繁的输入请求无疑会增大服务器的压力。

为了解决这个的问题，可以使用防抖动的方式来处理，通过设置前后连续两次按键输入的间隔时间来控制接口的请求，大致代码如下：

上面的代码虽然看上去很不错，但是还有一个隐藏的问题：竞态条件（race condition）。

        “在并发编程中，由于不恰当的时序导致出现不正确的结果，这种情况就称之为竞态条件”                      

举个栗子，先搜索rxjs，然后立刻改为搜索promise，结果下拉框中显示的是rxjs，与当前期望搜索的promise不符。这是因为在两次快速的并行接口请求中，后请求的接口先返回了数据。

为了解决这个问题，可以增加一个标识符，每次调用接口前设置标识符，当接口返回数据后，先检查当前标识符是否与调用时的标识符一致，一致后再执行内部逻辑，大致代码如下：

大功告成，现在回过头来看一下代码，发现代码开始变得复杂和臃肿，所以接下来用rxjs优化一下，大致代码如下：