Biegral Blog

项目中有一个搜索组件使用了autocomplete的自动填充功能，在用户点击任意键盘后将触发一次请求，根据autocomplete的文档可知，默认delay的值为10ms.

在用户慢速输入的时候，该模块没有问题，但是当快速的输入查询字符串时，结果有时候会出现差错。

第一种情况：  

第二种情况：  

 首先，delay：10属性的意思是当用户敲击键盘10ms后再进行请求，源码的实现如下：

clearTimeout(timeout);
timeout = setTimeout(onChange, options.delay);

如果用户连续输入，则两次击键的时间间隔可分为以下两种情况：

间隔时间<10ms ：取消前次请求，直接进行当前输入请求，如表格一的情况，中间空缺了hua的请求。

间隔时间>10ms：每次输入都有对应的请求，但是因为间隔时间只有10ms，可能因为网络，渲染等原因，“huang”的结果先返回，紧跟着“huan”的结果再返回，就出现如表2所述的情况，这种情况下建议将delay值改大到500ms--1000ms之间，这样两次请求就不会冲突。