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

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

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

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

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

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);
});

3、总结

　　从宏观意义上来说，咱们须要对每个按钮去作”防止重复点击提交“，面对这种状况，咱们即可以采用必定策略来对其进行封装实现（如定义通用按钮类绑定事件）。

　　从具体状况上来说，咱们并不须要对每个按钮都去作”防止重复点击提交“，仅仅须要对某些可能具备复杂后台业务逻辑、或者文件上传、或者调用其余非本工程接口致使网络延迟等等状况须要去作”防止重复点击提交“。与此同时，咱们必需要给予用户友好提示(如文本提示、渲染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);