防止重复发送 Ajax 请求


Posted in Javascript onFebruary 15, 2017

要考虑并理解 success, complete, error, timeout 这些事件的区别,并注册正确的事件,一旦失误,功能将不再可用;

不可避免地比普通流程要要多注册一个 complete 事件;

恢复状态的代码很容易和不相干的代码混合在一起;

推荐用主动查询状态的方式(A、B,jQuery 为例)或工具函数的方式(C、D)来去除重复操作,并提供一些例子作为参考:

A. 独占型提交

只允许同时存在一次提交操作,并且直到本次提交完成才能进行下一次提交。

module.submit = function() {
 if (this.promise_.state() === 'pending') {
 return
 }
 return this.promise_ = $.post('/api/save')
}

B. 贪婪型提交

无限制的提交,但是以最后一次操作为准;亦即需要尽快给出最后一次操作的反馈,而前面的操作结果并不重要。

module.submit = function() {
 if (this.promise_.state() === 'pending') {
 this.promise_.abort()
 }
 // todo
}

比如某些应用的条目中,有一些进行类似「喜欢」或「不喜欢」操作的二态按钮。如果按下后不立即给出反馈,用户的目光焦点就可能在那个按钮上停顿许久;如果按下时即时切换按钮的状态,再在程序上用 abort 来实现积极的提交,这样既能提高用户体验,还能降低服务器压力,皆大欢喜。

C. 节制型提交

无论提交如何频繁,任意两次有效提交的间隔时间必定会大于或等于某一时间间隔;即以一定频率提交。

module.submit = throttle(150, function() {
 // todo
})

如果客户发送每隔100毫秒发送过来10次请求,此模块将只接收其中6个(每个在时间线上距离为150毫秒)进行处理。

这也是解决查询冲突的一种可选手段,比如以知乎草稿举例,仔细观察可以发现:

编辑器的 blur 事件会立即触发保存;

保存按钮的 click 事件也会立即触发保存;

但是存在一种情况会使这两个事件在数毫秒内连续发生——当焦点在编辑器内部,并且直接去点击保存按钮——这时用 throttle 来处理是可行的。

另外还有一些事件处理会很频繁地使用 throttle,如: resize、scroll、mousemove。

D. 懒惰型提交

任意两次提交的间隔时间,必须大于一个指定时间,才会促成有效提交;即不给休息不干活。

module.submit = debounce(150, function() {
 // todo
})

还是以知乎草稿举例,当在编辑器内按下 ctrl + s 时,可以手动保存草稿;如果你连按,程序会表示不理解为什么你要连按,只有等你放弃连按,它才会继续。

============

更多记忆中的例子

方式 C 和 方式 D 有时更加通用,比如这些情况:

游戏中你捡到一把威力强大的高速武器,为了防止你的子弹在屏幕上打成一条直线,可以 throttle 来控制频率;

在弹幕型游戏里,为了防止你把射击键夹住来进行无脑游戏,可以用 debounce 来控制频率;

在编译任务里,守护进程监视了某一文件夹里所有的文件(如任一文件的改变都可以触发重新编译,一次执行就需要2秒),但某种操作能够瞬间造成大量文件改变(如 git checkout),这时一个简单的 debounce 可以使编译任务只执行一次。

而方式 C 甚至可以和方式 B 组合使用,比如自动完成组件(Google 首页的搜索就是):

当用户快速输入文本时(特别是打字能手),可以 throttle keypress 事件处理函数,以指定时间间隔来提取文本域的值,然后立即进行新的查询;

当新的查询需要发送,但上一个查询还没返回结果时,可以 abort 未完成的查询,并立即发送新查询;

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
关于document.cookie的使用javascript
Oct 29 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
Vue异步组件使用详解
Apr 08 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 #Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 #Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 #Javascript
Canvas 绘制粒子动画背景
Feb 15 #Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 #Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 #Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 #Javascript
You might like
php分页函数
2006/07/08 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
php实现映射操作实例详解
2019/10/02 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
iframe实用操作锦集
2014/04/22 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
Python: glob匹配文件的操作
2020/12/11 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
总裁助理岗位职责
2014/02/17 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
MySQL多表查询机制
2022/03/17 MySQL