防抖和节流

在前端开发中有一部分的用户行为会频繁的触发事件执行，而对于 DOM操作，资源加载等耗费资源性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数节流（throttle）和函数防抖（debounce），就是为了解决类似需求应运而生的。

1， 函数防抖

就是在函数需要频繁触发情况下，只有足够空闲的时间，才执行一次。
好像公交司机会等人都上车后，才出站一样。

防抖场景：实时搜索（keyup） 拖拽（mousemove）

实时搜索的防抖操作：

<input type="text" id="inp">
-------------------------------------------------------------
var oInp = document.getElementById("inp");
var timer = null;

function ajax(e) {
  console.log(e, this.value);//这个里面 的this指向window,因为没有人调用它
}

oInp.oninput = function (e) {//这个才是搜索的事件处理函数
  // console.log(arguments);
  var _self = this, _arg = arguments;
  
  clearTimeout(timer);//首先先清除定时器
  
  timer = setTimeout(function () {
  		ajax.apply(_self, _arg);//此处的ajax()函数，要让this指向搜索的事件处理函数的this,所以用到了apply,那么就需要在前面提前把该函数的this和arguments用变量存起来 
  }, 1000)
}

根据上面的一个ajax函数事实搜索的小例子来封装一个引用在防抖场景下的防抖函数

  	 function debounce(handler, delay) {
  	 //handler就是功能性函数，delay就是要延迟多长时间来实现这个功能性函数
          var timer = null;
          return function () {//这个返回的匿名函数才是调用时候的事件处理函数
              var _self = this,  _arg = arguments;
              clearTimeout(timer);
              timer = setTimeout(function () {
                  handler.apply(_self, _arg);
              }, delay)
          }
      }

      function ajax(e) {
          console.log(e, this.value);
      }
      var oInp = document.getElementById("inp");
      oInp.oninput = debounce(ajax, 2000);

2，函数节流

就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。
好像水滴攒到一定重量才会落下一样。

节流场景： 窗口调整（resize） ,页面滚动（scroll）， 抢购疯狂点击（mousedown）

疯狂点击事件的节流操作：

	<div id="show">0</div>
    <button id="btn">click </button>
----------------------------------
   var oDiv = document.getElementById("show");
    var oBtn = document.getElementById("btn");
    //1 1000 1200 1 -2200
    function throttle(handler, wait) {
        var lastTime = 0;
        return function (e) { //真正的事件处理函数，里面的e是系统传进来的事件处理对象,写不写e它都有
            //arguments
            var nowTime = new Date().getTime();
            if (nowTime - lastTime > wait) {
                handler.apply(this, arguments); //这里的this指向oBtn，argument列表第0位也就是事件处理对象e
                lastTime = nowTime;
            }
        }
    }

    function buy(e) {
        console.log(this, e);
        oDiv.innerText = parseInt(oDiv.innerText) + 1;
    }
    oBtn.onclick = throttle(buy, 1000);