教你如何终止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 相关文章推荐
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
javascript基础知识讲解
Jan 11 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
JS图片预加载插件详解
Jun 21 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 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
我的论坛源代码(六)
2006/10/09 PHP
php之字符串变相相减的代码
2007/03/19 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
详谈PHP编码转换问题
2015/07/28 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
Python中的exec、eval使用实例
2014/09/23 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
详解python基础之while循环及if判断
2017/08/24 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python中过滤字符串列表的方法
2020/12/22 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
竞聘演讲稿
2014/04/24 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
责任书范本大全
2015/05/11 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python