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

背景

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

问题

如果不做处理，只监听输入框的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);}}

输入框实时搜索优化，减少请求次数、取消无用请求相关推荐

Flutter 输入框实时搜索性能优化
在App开发过程中,搜索功能是必不可少的.一般对于搜索功能,要么是输入一段文字后自己手动点击搜索按钮进行搜索:要么是实时的搜索.如果输入框中每一个字符的改变都要去触发网络请求的话,会浪费用户的流量,增 ...
input输入框实时搜索匹配
实时搜索功能最终效果如下:当是英文输入或数字时,每次输入都会触发,但当是中文输入法时,只有在选中文字后才会触发,类似百度搜索 (以react为例) <input value={searchVa ...
关于 axios 取消重复请求的分析
前言关于取消重复请求,最重要的是这么做的意义,而不在于代码的实现其实,我觉得,绝大部分能够想到的应用场景,都可以通过防抖.节流方式实现,比如实时搜索,比如重复订单提交.比如上拉获取最新数据等我们 ...
vue使用防抖节流（提交表单、实时搜索）
1.封装防抖节流方法 deTh.js /*** 闭包函数* * 防抖:对于短时间内连续触发的事件(滚动事件.表单重复提交.页面resize事件,常见于需要做页面适配的时候),让某个时间期限内,事件处理 ...
测试无法测试的几乎苹果api实时搜索示例
First of all let's make it clear about what a live search is. In a short definition, we could say it ...
ASIHTTPRequest取消异步请求
取消异步请求首先,同步请求是不能取消的. 其次,不管是队列请求,还是简单的异步请求,全部调用[ request cancel ]来取消请求. 取消的请求默认都会按请求失败处理,并调用请求失败dele ...
php多次请求只执行最后一次,取消重复请求，只让最后一次请求通过
axios 请求拦截取消重复请求(多次重复异步,结束pending状态) 前端开发中,会涉及很多异步事件处理,页面展示的处理关系最密切的就是loading图层,但是loading交互在一些时候会不太 ...
axios请求失败、请求超时重新发送请求
一. axios重新发送请求基础版(所有的请求错误,不论是请求超时还是接口请求出错都会进行重试) 以下是一个完整的文件,看懂了的话axios重试请求也就基本会了,不会的话直接复制到项目里,也可以直接调 ...
Web项目性能优化之减少HTTP请求次数优化
作为项目经理的我,在近两个月内,时常被客户抱怨,我们的Web程序性能太差,经常宕机,即使服务器的配置再好,在业务请求量大的情况下也比较容易出现系统繁忙,线程堵塞,最后Web容器的HTTP线程池被慢慢耗 ...

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

背景

问题

优化思路

实现

输入框实时搜索优化，减少请求次数、取消无用请求相关推荐

最新文章

热门文章