教你如何终止JQUERY的$.AJAX请求


Posted in Javascript onFebruary 23, 2016

最近遇到,如果用户频繁点击ajax请求,有两个问题:

1,如果连续点击了5个ajax请求,前4个其实是无效的,趁早结束节省资源。

2,更严重的问题是:最后一个发送的请求,响应未必是最后一个,有可能造成混乱。还需要一个队列来维护发送的请求和响应。

我其实已经设计好了该队列的实现方式,后来发现jQuery直接通过abort方法,这样就不需要那么复杂的实现了,毕竟还有其他事情等着完成。

用jquery发送ajax请求的确是太方便了,$.get、$.post、$.ajax等等,但我们有时候需要中途中止ajax请求。

举个例子,用comet做聊天时,发送一个请求后,服务端通常过几十秒后才会刷新链接、返回数据。假设服务端是30秒刷新一次链接,如果我们在10秒时想要停止这个ajax请求,怎么办呢?

先上代码,后面再解释

var ajaxGet = $.get(“comet_server.php”,{id:1},function(data){
….//一些操作
});
ajaxGet.abort();

上面这段代码其于两个知识点:

1. $.get返回的数据类型是XMLHttpRequest,请参考手册。($.post、$.ajax、$.getJSON、$.getScript也同样)

2. XMLHttpRequest对象有abort()方法

注意:abort()后,ajax请求立即停止,但还是会执行后面的function()。如果想避免执行其中的操作,可以在function()开始位置加判断

var ajaxGet = $.get(“comet_server.php”,{id:1},function(data){
if(data.length == 0) return true;
….//一些操作
});
ajaxGet.abort();

终止ajax请求:

var request = $.get(“ajax.aspx”,{id:1},function(data){
  //do something
});
//终止请求动作.
request.abort();

防止重复请求:

var request;
if(request != null)
  request.abort();
request = $.get(“ajax.aspx”,{id:1},function(){
  //do something
});
ajax & setTimeout实现 secondTry 在等待一秒之后将firstTry的ajax终止:
var firstTry = $.ajax(
 //do something
 );
var secondTry = setTimeout(function(){alert(‘ok');firstTry.abort()},1000);
Javascript 相关文章推荐
JavaScript类和继承 constructor属性
Mar 04 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
javascrip关于继承的小例子
May 10 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
vue组件间通信解析
Mar 01 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 #Javascript
javascript每日必学之多态
Feb 23 #Javascript
javascript每日必学之继承
Feb 23 #Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 #Javascript
理解javascript封装
Feb 23 #Javascript
学习Javascript面向对象编程之封装
Feb 23 #Javascript
javascript每日必学之封装
Feb 23 #Javascript
You might like
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
php实现的漂亮分页方法
2014/04/17 PHP
php日期操作技巧小结
2016/06/25 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
一则python3的简单爬虫代码
2014/05/26 Python
Linux下Python获取IP地址的代码
2014/11/30 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
详解Python if-elif-else知识点
2018/06/11 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
思想汇报格式
2014/01/05 职场文书
经典毕业生求职信
2014/07/12 职场文书
三峡人家导游词
2015/01/31 职场文书
会计岗位职责范本
2015/04/02 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
opencv检测动态物体的实现
2021/07/21 Python