教你如何终止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 相关文章推荐
js检查页面上有无重复id的实现代码
Jul 17 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
一个可复用的vue分页组件
May 15 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
关于JS模块化的知识点分享
Oct 16 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
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
jquery foreach使用示例
2013/09/12 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
JavaScript中string对象
2015/06/12 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
python实现代理服务功能实例
2013/11/15 Python
Python中的map、reduce和filter浅析
2014/04/26 Python
Python实现的一个简单LRU cache
2014/09/26 Python
github配置使用指南
2014/11/18 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
详解python进行mp3格式判断
2016/12/23 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
【python】matplotlib动态显示详解
2019/04/11 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
制药工程专业职业生涯规划范文
2014/03/10 职场文书
搞笑爱情保证书
2014/04/29 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
求职信范文大全
2014/05/26 职场文书
动物科学专业求职信
2014/07/27 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript