事件委托、函数节流及函数防抖

概念

函数防抖（debounce）

当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间

如果一个事件被频繁触发多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数只执行一次

函数节流（throttle）

预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期

如果一个事件被频繁触发多次，节流函数可以按照固定频率去执行对应的事件处理方法

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

比如如下的情况：

• window对象的resize、scroll事件（页面重绘、位置监听）
• 拖拽时的mousemove事件（位置监听）
• 文字输入、自动完成的keyup事件（搜索等）

一、事件委托：

• JS事件处理程序的性能缺陷：

由于事件处理程序可以为现代web应用程序提供交互能力，因此许多开发人员会部分青红皂白的向页面中添加大量的处理程序。在创建GUI的语言（比如C#）中，为GUI中的每一个按钮添加一个onclick事件处理程序是司空见惯的事情，而且这样做也不会导至什么问题。可是在JS中，添加到页面上的事件处理程序都会占用内存，内存占用的越多性能就越差，且必须事先就指定好所有的事件处理程序而导致的DOM访问次数的增加会延迟整个页面的交互就绪时间。
————《javascript高级程序设计（三版）》

JS高程中对于事件处理程序中的问题说的很清楚了，基本上就是说事件处理程序绑定的越多越影响性能，但是又不能说不绑定事件，所以我们需要一种方法来减少绑定的事件。

• 事件对象：

在触发DOM上的某个事件的时候，就会产生一个事件对象event，这个对象中包含着所有与事件有关的信息，其中包括导至事件的元素、事件的类型以及其他与特定事件相关的信息。

兼容DOM的浏览器会将一个event对象传入到事件处理程序中，无论指定事件处理程序时使用什么方法，都会传入一个event对象：

var btn = document.getElementById('myBtn');
btn.onclick.function (event) {
    alert(event.type);      //'click'
}

上面的事件处理程序会弹出一个警告框，框中显示有event.type属性表示的事件类型。

当然，event对象上包含很多特定的属性和方法，这里只列出一个我们会用到的属性，那就是target属性，这个属性表明了我们的事件的目标。

当然，上面说的是通用的现代浏览器的event对象，当这个对象存在与IE中的时候，又不一样了：

在使用DOM0级方法添加事件处理程序的时候，event对象是作为window对象的一个属性存在的，看下面的例子：

var btn = document.getElementById('myBtn');
btn.onclick.function () {
    var event = window.event;
    alert(event.type);      //'click'
}

如上面所见，我们通过window.event取得了event对象，并检测了被触发事件的类型。

那么在IE中的target属性又是什么样的呢？其实差不多，不过是target属性被替换成了srcElement属性来表示事件的目标，但是因为事件处理程序的作用域是根据指定它的方式来确定的，因此不能认为this会始终等于时间目标，所以最好使用window.event.srcElement来最终确定事件的目标！

因此，一个兼容IE的事件目标的函数如下：

oUl.onclick = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    // 程序
 }

• 事件委托：

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

如果需要每个li点击之后display为none，那么传统的做法是用一个for循环遍历每一个li节点，然后在循环里面给每一个li都绑定上一个click事件；

而使用事件委托呢？就是给ul添加一个onclick的事件处理程序。。。看到这里或许就要问了，我给ul添加点击事件，那岂不是在ul里面随便点击一下就会触发了？确实如此，所以这里要进行很重要的一步：判断我们点击的到底是什么，然后再根据我们获知的点击对象去执行对应的函数。

那么如何去判断我们点击了什么呢？

首先要用到一个我们平时在绑定事件的时候都会禁止掉的一个东西：事件冒泡。试想一下如果ul和li上都绑定了点击事件，同时li上绑定的事件没有禁止掉事件冒泡，那么当我们点击li的时候就会先触发li上的点击事件然后再触发ul上的点击事件了。同理，我们可以通过冒泡来获取click事件再执行ul上的事件处理程序。

其次，我们需要判断冒泡上来的事件流是否是在li上面触发的，如果随便一个都能冒泡并触发ul上的点击事件那也没什么意义了。这里就要用到我们上面提到的事件目标对象的获取了，通过检测我们获取到的目标的nodeName，看其是不是li就可以了。

最终的事件委托代码如下：

var oUl = document.getElementById("ul");
oUl.onclick = function(ev){

    var ev = ev || window.event,
        target = ev.target || ev.srcElement;

    // 因为nodeName获取到的节点名是大写，因此需要使用toLowerCase()来将其转换为小写
    if (target.nodeName.toLowerCase() == "li") {
        //执行函数
    }
 }

二、函数节流：

DOM操作是昂贵的，所以FB采用了Virtual DOM来尽量简化DOM操作，《高性能javascript》一书也强调了要尽量减少DOM操作~嗯，为什么要提到这个呢？

相信很多人都用过两个事件：onresize跟onscroll，这两个事件一个在页面放大缩小时触发一个在页面滚动时触发，一般情况下伴随着这两个事件的肯定是DOM节点的定位，scrollTop距离的检测之类的操作，回到最初的问题，每一次onresize和onscroll事件触发的时候去执行DOM操作将严重影响页面渲染！

既然发现了问题，那么就要解决问题，解决的办法就是函数节流。函数节流背后的思想很简单：因为onresize跟onscroll这类事件是连续不断的触发的，那么在每次触发的时候我们就开一个定时器，将DOM操作延迟，然后在下一次事件触发的时候，我们把这个定时器给关掉，这样的结果就是onresize事件一路触发的时候，我们开定时器，关定时器，开定时器，关定时器。。。一直等到最后你不执行onresize的操作了，再等待延迟的时间后，最后这个没有被关闭的定时器开始执行回调函数，访问DOM节点。

对于函数节流，有两种实现的方法：

• 第一种是《javascript高级程序设计》中的方法：

function _throttle(method , context){
    clearTimeout(method.tId);

    method.tId=setTimeout(function(){
        method.call(context);
    },500);
}

• 第二种是网上的方法：

function _throttle(fn, time) { 

  let _self = fn, 
      timer,  
      firstTime = true //记录是否是第一次执行的flag

  return function() { 
       let args = arguments, //解决闭包传参问题
           _me = this //解决上下文丢失问题

       if(firstTime) { //若是第一次，则直接执行
           _self.apply(_me, args)
           return firstTime = false
       }
       if(timer) { //定时器存在，说明有事件监听器在执行，直接返回
           return false
       }

       timer = setTimeout(function() { 
          clearTimeout(timer)
          timer = null
          _self.apply(_me, args)
       }, time || 500)
   }
}

function _log() {
    console.log(1)
}

window.onscroll = _throttle(_log,500)

三、函数防抖：

函数节流是一个很好用的方案，但假如我并不希望每次都是要事件结束后等待delay的事件后才执行回调，但是又希望减少DOM操作，那该如何处理呢？

我们先给定一个时间段duration，过了这个时间段以后我们执行相应的操作，如果没有过这个时间段，那么就按照函数节流的思路，开关定时器就行了~

function _debounce(fn,wait,time){
    var previous = null; //记录上一次运行的时间
    var timer = null;

    return function(){
        var now = +new Date();

        previous = previous || now;
        //当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话，就主动执行一次

        clearTimeout(timer);
        if(now - previous > time){
            fn();
            previous = now; // 执行函数后，马上记录当前时间
        }else{
            timer = setTimeout(function(){
                fn();
            },wait);
        }
    }
}

function _log(){
    console.log(1)
}

window.onscroll = _debounce(_log,50,300)