前端性能优化--防抖节流

防抖和节流

首先两者的区别

• 防抖：N秒内只触发一次，如果N秒内再次触发则重新计算时间；
• 节流：N秒内只触发一次，如果N秒内再次触发也不会执行；

防抖的实现

这里使用Vue自定义指令的形式实现，核心代码是事件绑定那段

   /**
   * @description Vue自定义指令
   * @param argment[0] {type: String}
   * @param argment[1] {type: Object} 在绑定组件中的各个生命周期中书写业务，这里使用inserted(){}
   */
  Vue.directive('shake', {
   
    /**
     * @description () 在Dom父组件被挂载前的钩子函数中使用
     * @param el {type: Object}绑定元素的节点
     * @param binding {type: 所有合法的JS表达式}
     * */