关于按钮的节流

参考借鉴了彪悍一小兔的javaWeb的入门实战这篇博文。并在基础上进行了进行提炼。

情景拟定一

1. 对于某一个按钮进行绑定点击事件[原博文是banner的切换]

2. 结果用户出现这样的使用情况，一直狂点，狂点，无法控制的手抖点，结果图片卡屏抖来抖去，甚至有可能会卡崩溃

情景拟定二

1. 对于一个登录按钮

2. 网速比较慢，点击了之后没有反应，用户急了又连点好多下
3. 如果什么都不加控制的情况下，服务器会受到好多次的请求，想一下如果大量用户都这样的话，服务器有可能会炸。

说白了就是为了解决用户狂点问题
我们引入了节流[原博文是这样写的]的做法

具体思路是这样的：

为用户的点击设定一个<u>反应时间</u> (反应时间过后才会进行提交请求)，如果在<u>反应时间</u>之内用户又做了请求，那么将后一个请求覆盖掉前一个请求，这样能够在一定时间内，保证只会响应用户的一个请求。

具体代码如下：

jQuery

var timer = null;
var btn = $("selector").eq(0);//获取某个按钮jQ对象
btn.on("click",function(){
  clearTimeout(timer);
  timer = setTimeout(function(){
  //coding 需要进行的操作代码  
  },500);
//500毫秒后才会进行响应动作，如果期间重新点击，会清空timer然后重新计时500ms
});

---

javascript

var timer = null;
vat btn = document.getElementById("selector");
btn.onclick = function(){
  clearTimeout(timer);
  timer = setTimeout(function(){
  //coding
  },500);
};

注意setTimeout clearTimeout
和setTimeInterval 和 clearTimeInterval
区分：前者是过了xx时间执行某代码/方法
后者是每隔xx时间执行某代码/方法