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

一、有效地在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);
});

三、总结

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

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

//全站ajax加载提示
(function ($) {
  var str = '<div class="ajax-status" style="display: none;">' +
    '<div class="ajax"><img src="img/loading.gif" width="20height="20" />数据加载中...</div>' +
    '</div>';
  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
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值