防止重复发送 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 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
使用 vue-i18n 切换中英文效果
May 23 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
vue实现简单图片上传
Jun 30 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
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为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
js读写json文件实例代码
2014/10/21 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
wxpython布局的实现方法
2019/11/01 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
自立自强的名人事例
2014/02/10 职场文书
军训教官感言
2014/03/02 职场文书
公司开业庆典主持词
2014/03/21 职场文书
租车协议书范本
2014/04/22 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
责任书范本
2014/08/25 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
美容院员工规章制度
2015/08/05 职场文书
个人向公司借款协议书
2016/03/19 职场文书
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL