防止重复发送 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 相关文章推荐
javascript Array.remove() 数组删除
Aug 06 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 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 不同编码下的字符串长度区分
2009/09/26 PHP
php错误级别的设置方法
2013/06/17 PHP
PHP输出日历表代码实例
2015/03/27 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
Prototype使用指南之selector.js说明
2008/10/26 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
js跳转页面方法总结
2014/01/29 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
Python中的各种装饰器详解
2015/04/11 Python
python reduce 函数使用详解
2017/12/05 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
python扫描线填充算法详解
2020/02/19 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
《跨越百年的美丽》教学反思
2014/02/11 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
社会发展项目建议书
2014/08/25 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
mysql序号rownum行号实现方式
2022/12/24 MySQL