js事件节流、防抖、事件委托

实现节流函数（throttle）

事件节流和防抖是为了解决开发过程中遇到性能问题，常见于onscroll、onresize，频繁点击button等

原理
设置一个时间间隔，时间间隔内只允许执行一次如果在这个时间间隔内多次触发，也只执行一次

例子

const throttle = (fn, wait = 50) => {
  // 上一次执行的时间
  let lastTime = 0;
  return function(...args) {
    // 当前时间 单位毫秒
    let now = +new Date()
    // 将当前时间和上一次执行时间对比
    // 如果大于设置的await就执行函数
    if ((now - lastTime) > wait) {
      fn.apply(this, args)
      lastTime = now
    }
  }
}
let time =0
setInterval(() => {
  time++
  // 1s打印一次时间 方便看
  console.log(`time:${time}`)
}, 1000)
// 5s只执行一次
setInterval(throttle(() => {
  console.log(1)
}, 5000), 500)

适用场景

1，拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
2，缩放场景：监控浏览器resize
3，动画场景：避免短时间内多次触发动画引起性能问题

实现防抖函数（debounce）

常用于验证码防刷，按钮频繁点击导致发起多次请求给服务端造成压力
防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
 

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function(...args) {
    if (timer) {
      console.log(`timer:${timer}`)
      clearTimeout(timer)
      console.log(`timer:${timer}`)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

let time = 0;
setInterval(() => {
  time++;
  // 1s打印一次时间 方便看
  console.log(`time:${time}`);
}, 1000);

// setInterval设置的时间大于1000 才能触发 小于1000不会触发
setInterval(
  debounce(() => {
    console.log(`1`);
  }, 1000),
  1500
);

也可以直接用lodash库的debounce方法
lodash中文文档

适用场景

按钮提交场景：防止多次提交按钮，只执行最后提交的一次 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似

事件委托(事件代理)

事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。
事件代理的原理是DOM元素的事件冒泡。

事件冒泡

一个事件触发后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段

如上图所示，事件传播分成三个阶段：

1，捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；

2，目标阶段：在目标节点上触发，称为“目标阶段”

3，冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；

事件委托的优点

• 可以大量节省内存占用，减少事件注册，只在父元素ul绑定一次事件,不需要在每一个li上绑定事件
• 当新增子对象时无需再次对其绑定（动态绑定事件）

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>
// ...... 代表中间还有未知数个 li

如上面代码所示，如果给每个li列表项都绑定一个函数，那对内存的消耗是非常大的，因此较好的解决办法就是将li元素的点击事件绑定到它的父元素ul身上，执行事件的时候再去匹配判断目标元素。

代码

JavaScript原生实现事件委托
比如我们有这样的一个 HTML 片段,点击li标签时要触发事件

<ul id="myLinks">
  <li id="goSomewhere">Go somewhere</li>
  <li id="doSomething">Do something</li>
  <li id="sayHi">Say hi</li>
</ul>

不通过事件委托的方式,代码如下

    var item1 = document.getElementById("goSomewhere");
    var item2 = document.getElementById("doSomething");
    var item3 = document.getElementById("sayHi");
 
    item1.onclick = function() {
      location.href = "http://www.baidu.com";
    };
    item2.onclick = function() {
      document.title = "事件委托";
    };
    item3.onclick = function() {
      alert("hi");
     }

在一个复杂的 Web 应用程序中，对所有可单击的元素都采用这种方式，那么结果就会有数不 清的代码用于添加事件处理程序。
此时，可以利用事件委托技术解决这个问题。使用事件委托，只需在 DOM 树中尽量最高的层次上添加一个事件处理程序，如下面的例子所示

    var item1 = document.getElementById("goSomewhere");
    var item2 = document.getElementById("doSomething");
    var item3 = document.getElementById("sayHi");
 
    document.addEventListener("click", function (event) {
      var target = event.target;
      switch (target.id) {
        case "doSomething":
          document.title = "事件委托";
          break;
        case "goSomewhere":
          location.href = "http://www.baidu.com";
          break;
        case "sayHi": alert("hi");
          break;
      }

• vue中事件对象
  @click="show($event)

通过$event获取事件对象

<el-input
   v-model="search"
   placeholder="搜索商家或地点"
   @focus="focus($event)"
   @blur="blur"
   @input="input"/>

兼容性写法 

//获得event对象兼容性写法 
event || (event = window.event);

//获得target兼容型写法 
event.target||event.srcElement

//阻止浏览器默认行为兼容性写法 
event.preventDefault ? event.preventDefault() : (event.returnValue = false);

//阻止冒泡写法 
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

推荐阅读 

JS事件冒泡、事件捕获、默认事件、事件对象那些事

防止onresize事件触发多次

建议收藏!async ,await相关知识总结,适用于js基础不错的童鞋

JS事件轮询机制（Event Loop）