输入框实时搜索优化 减少请求次数 取消无用请求

背景

用户在输入框输入内容的同时进行搜索，针对搜索实时搜索结果进行展示

问题

如果不做处理，只监听输入框的input事件或者键盘按下弹起事件，实时对文本内容进行搜索，往往因为网络波动问题可能会造成结果与搜索内容显示不一致的问题，而且由于发起的请求过于频繁，无形中给浏览器和服务器均造成一定压力

优化思路

减少发起请求次数、取消无效请求

实现

var request={startRequest:null,requesting:null,//请求数据的函数requestDataFromApi:function (parameters) {let _=this;if(_.startRequest){clearTimeout(_.startRequest);}//通过timeout函数，减少发起请求次数this.startRequest=setTimeout(()=>{if(_.requesting){//通过abort函数，取消已发起的无用请求_.requesting.abort();}_.requesting=$.ajax({url:"接口url",type:"get",data:{},success:function (res) {//结果处理console.log(res);}});},200);}}