浅谈一下如何避免用户多次点击造成的多次请求

一、有效地在web客户端采用一定机制去防止重复点击提交，将大大减轻服务器端压力

一、有效地在web客户端采用一定机制去防止重复点击提交，将大大减轻服务器端压力。

1> 定义标志位：

点击触发请求后，标志位为false量；请求（或者包括请求后具体的业务流程处理）后，标志位为true量。通过标志位来判断用户点击是否具备应有的响应。

2> 卸载及重载绑定事件：

点击触发请求后，卸载点击事件；请求（或者包括请求后具体的业务流程处理）后，重新载入绑定事件。

二、请求频度

相信大家碰到过这样的业务，我们允许它重复点击（或者其他用户事件），但是不允许在一定的时间内超过次数XX次。这从用户友好体验及服务器承受压力选取了一个折中方案。

最合适不过的例子，莫过于关键字搜索匹配了。

var timer = null; $(input).keyup(function () { var value = $(this).val(); clearTimeout(timer); //如果键盘敲击速度太快，小于100毫秒的话就不会向后台发请求，但是最后总会进行一次请求的。 timer = setTimeout(function () { //触发请求 $.ajax({ url: 'typeahead.do', type: 'get', data: value, success: function () { //显示匹配结果 //...... } }); }, 100); });

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

三、总结

从宏观意义上来讲，我们需要对每一个按钮去做”防止重复点击提交“，面对这种情况，我们便可以采用一定策略来对其进行封装实现（如定义通用按钮类绑定事件）。

从具体情况上来讲，我们并不需要对每一个按钮都去做”防止重复点击提交“，仅仅需要对某些可能具有复杂后台业务逻辑、或者文件上传、或者调用其他非本工程接口导致网络延迟等等情况需要去做”防止重复点击提交“。与此同时，我们必须要给予用户友好提示(如文本提示、渲染loading条、显示文件上传进度条等等)。两者需要一起来看、一起来做。当然，我们可以单独提取状态显示这个实现逻辑。代码如下——

//全站ajax加载提示 (function ($) { var str = '

'; var dom = $(str).prependTo('body'); $(document).ajaxStart(function () { dom.stop(true, false).queue(function () { $(this).show().dequeue(); }); }) $(document).ajaxStop(function () { dom.queue(function () { $(this).hide().dequeue(); }); }); })(jQuery);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。