教你如何终止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 对Cookie 操作的封装小结
Dec 31 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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/01/05 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python线程指南详细介绍
2017/01/05 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
python 动态绘制爱心的示例
2020/09/27 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
商务英语求职自荐信范文
2013/12/24 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
比赛主持人开场白
2015/05/29 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python
vue使用element-ui按需引入
2022/05/20 Vue.js