jquery ajax使用定时器限制请求次数及终止重复请求
场景描述:
在我们平时的开发过程中,经常会遇到这样的情况。在搜索功能中进行模糊搜索或者联想关联。
这就要我们每次对输入框中的数据进行改动时,都要发送一次请求。当在短时间内多次操作改动时,问题就出现了。
每次操作的请求都会返回数据,有时,返回的数据需要时间长,有时返回的数据需要时间短。大家都知道,ajax请求默认的是异步请求,每次请求和请求后进行的操作,都是独立进行的。当同一个请求多次发生时,他在页面上最终执行的效果是,以最晚返回的数据进行相应的展示操作,而不是绝对以最后一次请求所返回的数据进行展示(注:最后一次请求不一定是最晚返回的。)。
我们想要的当然是最后一次请求的数据进行的展示操作了啊。那我们就要求,绝对最后一次执行的是最后一次请求后所要进行的操作。解决方法有两种:
一、使用定时器,限制请求次数。
保证在一定的时间间隔内,对输入框进行多次改动操作,发送的只有最后一次改动操作的请求。
这种方法有很大优点,首先在一定程度上,解决了上面所描述的问题。其次,他减少了请求次数,减少了服务器和浏览器的工作量。
但是他还是有缺点的。
1、那就是时间间隔的把控。你不知道每次请求究竟会用多长时间,你不清楚设置多少合适,长了牺牲了客户的体验,短了还是会遇到上面的问题。
2、你不知道你面对的究竟是一群什么样的客户。就算你满足1中的条件设置好,你的客户进行反人类操作,按照你设置的时间间隔进行字母输入,那你的工作还是白费了。
基于上面两点,我并不喜欢采用这种方法解决这个问题,所以代码也不上了,大家知道思路,逻辑自己梳理吧。(绝对不是小编自己没有整理,才不发代码的。)
二、基于ajax自身的终止函数
将没有进行完而重复进行的请求,终止掉,而且是只终止前一个ajax请求,新的请求在下一个请求发送前,不会终止。
在这个方法中,一定要注意,每一个ajax都有一个自己的函数名,不同的函数名定义的ajax就是不同的ajax请求了。要只能终止自己的ajax请求。
这个方法也是有优缺点的。
优点:无论客户多么反人类,无论数据请求多么耗时,他都能保证返回和操作的是最有一次请求的数据。
缺点:每次输入框中的数据改动都会发送请求,即他不能减少请求次数。而且终止的话,也只是不再执行ajax前端部分接下来的操作,后台工作量还在。
好了两种方法大概这样,如果有人想两个方法结合,可以自己整理下啊。接下来,小编就只把第二种方法的代码上传上去,仅供参考。不足之处还望指正。各位大神在上,望多多交流。
var AllAjax={ commonAjax =function (interface,params,callback,flag) { var data={}; $.each(params,function(i,v){ data[i]=v; }); if(AllAjax[interface]){ AllAjax[interface].abort(); AllAjax.closeError=false; } AllAjax[interface]=$.ajax({ type: "post", url: interface, data: params, dataType: "json", success: function(data){ if(data.code == '200'){ callback(data); }else{ if(AllAjax.closeError){ AllAjax.closeError=true; }else{ AllAjax.closeError=true; } alert('数据有误!'+data.code); } }, error:function (err) { console.log(err); if(AllAjax.closeError||AllAjax.closeError===undefined){ alert('Network is error'); }else{ AllAjax.closeError=true; } } }); }; }
- 使用strace诊断奇怪的sqlplus登录问题(r5笔记第29天)
- 读书笔记 之《Thinking in Java》(对象、集合、异常)
- 深度解析dba_segments和sys.seg$中的细节差异(上) (r5笔记第27天)
- 【大牛经验】26种语言输出HelloWord
- 深度解析dba_segments和sys.seg$中的细节差异(下) (r5笔记第28天)
- Linux命令(面试+工作版)
- 纠结的paste格式问题(未解决) (r5笔记第26天)
- 由MySQL中的falcon存储引擎引申的八卦杂谈(r5笔记第23天)
- 12.观察者/状态模式
- 数据补丁中需要注意的几个问题(r5笔记第21天)
- 简单对比MySQL和Oracle中的一个sql解析细节 (r5笔记第40天)
- 关于Oracle和MySQL中的无密码登录 (r5笔记第39天)
- 快速定位隐蔽的sql性能问题及调优(r5笔记第38天)
- 关于统计信息过期的性能落差(r5笔记第36天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法