教你如何终止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 相关文章推荐
DOM基础教程之事件类型
Jan 20 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 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上的memcache和memcached两个pecl库
2010/03/29 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
php自定义错误处理用法实例
2015/03/20 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
新闻系毕业生推荐信
2013/11/16 职场文书
班组长工作职责
2013/12/25 职场文书
信访工作经验交流材料
2014/05/23 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
安全生产月标语
2014/10/07 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
运动会1000米加油稿
2015/07/21 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript