防止重复发送 Ajax 请求

要考虑并理解 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 未完成的查询，并立即发送新查询；

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 详解JavaScript for循环中发送AJAX请求问题

    详解JavaScript for循环中发送AJAX请求问题

    首先说,出现这个问题的场景是很少见的,因为有太多更好解决方法.今天搞ajax的时候,一个有趣的地方,,每个迭代中都要发送一个get请求,因为迭代的速度太快,一个请求还没有完成就进行下一个迭代,在chrome和ff上,除最后一个请求外,其它请求都被取消了.所以该怎么办呢?设置延时(不太好)还是其他办法?  办法有很多,比如设置休眠,迭代等等, 我采用的是另外两种解决办法.  一.同步的ajax请求,而ajax请求默认是异步的,所以要设置为false. function creatXMLHttpRe

  • jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用. 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据.阅读本文的读者应该具备jQuery.Ajax.PHP相关知识,并能熟练运用. XHTML <ul id="use

  • Extjs ajax同步请求时post方式参数发送方式

    ajax同步请求一般下面这样: 复制代码 代码如下: var conn = Ext.lib.Ajax.getConnectionObject().conn; conn.open("POST", 'http://localhost:8080/struts2study/TreeDDGet?node=-1',false); // 这里的conn对象其实就是 xmlHttpRequest 对象. conn.setRequestHeader("Content-Type",&q

  • ie发送ajax请求返回上一次结果的解决方法

    问题出现原因: 1. ie下面只会建立一次 ajax 请求,将响应结果放在浏览器缓存里 下次调用该ajax请求时 从缓存里读取 get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题 2. 火狐下面 每次激活事件 都会重新建立一次ajax请求 解决方法: 1: 在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数 在javascript发送的URL后加上t=Math.random() 例如这样:URL

  • 防止重复发送Ajax请求的解决方案

    在页面中有多个按钮,点击该按钮可以异步的去服务端读取数据,然后在前端将数据展示出来. 每个按钮点击请求的页面都是同一个,但是请求的参数不同,所以返回的内容就不同. 在连续点击多个按钮的时候就会发出多个异步请求.那么根据请求返回的快慢(因为不同按钮参数不同,返回内容不同,所以会有快慢之分),数据会依次的展示出来,那么就会出现一个先点击的按钮,由于他请求的数据量比较大,导致数据被后显示出来. 一.问题解决 解决这种问题有两种方式: 1.当连续进行多个请求,并且请求的url地址相同时.放弃前面的所有请

  • js与jQuery终止正在发送的ajax请求的方法

    本文实例讲述了js与jQuery终止正在发送的ajax请求的方法.分享给大家供大家参考,具体如下: 核心:调用XMLHttpRequest对象上的abort方法 jquery的ajax方法有自己的超时时间设置参数: $.ajax({type:'POST', url:'b.php', data:'', timeout:5000, success:function(){ } }) 同时 1. $.get返回的数据类型是XMLHttpRequest,请参考手册.($.post.$.ajax.$.get

  • AJAX中同时发送多个请求XMLHttpRequest对象处理方法

    在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费.解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有空闲的对象,则使用此对象,否则将创建一个新的对象. 下面是我最近写的一个简单的类:* XMLHttpRequest Object Pool * * @author    legend <legendsky@hotmai

  • jquery跨域请求示例分享(jquery发送ajax请求)

    jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数.原型如下: jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据. url: 发送请求的地址data : (可选) 待发送key/value参数callback: (可选) 载入成功时的回调函数主要用于客户端获取服务器JSON数据.简单示例: 服务器脚本,返回JSON数据: 复制代码 代码如下: // $.getJSON.php$

  • jquery+ajax每秒向后台发送请求数据然后返回页面的代码

    复制代码 代码如下: <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function chlink() { var url = "../handler/userfirend.ashx"; $.get(url, function(data)

  • jsp+ajax发送GET请求的方法

    本文实例讲述了ajax发送GET请求,然后通过jsp页面来接收处理的实现方法.分享给大家供大家参考.具体实现方法如下: Ajax发送GET请求 这里用一个实例演示Ajax发送get请求,实例具体要求为一个注册页面,当用户填写完用户名称时,该输入框失去焦点后会通过Ajax向后台发送验证信息,如果用户名不是admin则通过验证,否则不通过验证. 下面先看JSP页面具体信息: 复制代码 代码如下: <form action="servlet/LoginServlet" method=&

  • Javascript发送AJAX请求实例代码

    一个对AJAX的封装 //url就是请求的地址 //successFunc就是一个请求返回成功之后的一个function,有一个参数,参数就是服务器返回的报文体 function ajax(url,successFunc) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open("POST",url,true); xhr.onr

随机推荐