Vue 保存编辑 防抖（debounce） 和 节流（throttle）指令的创建

/**

• 防抖和节流指令的使用方法：
• 绑定示例： <el-button type="primary" size="mini" v-throttle="[save,'click,500]">保存</el-button>.bind(null,'filters')
• 绑定带有参数的函数：<el-button type="primary" size="mini" v-throttle="[save.bind(null,'filters')]">保存</el-button>
• 或者：<el-button type="primary" size="mini" v-throttle="[() => { save('filters') }]">保存</el-button>
  */

防抖

//防抖指令期待参数为 [fn, event, time]
Vue.directive('debounce', {
       inserted: function(el, binding) {
           let [fn, event = "click", time = 300] = binding.value
           let timer
           el.addEventListener(event, () => {
               timer && clearTimeout(timer)
               timer = setTimeout(() => fn(), time)
           })
       }
   })

//节流指令期待参数为 [fn, event, time]
Vue.directive('throttle', {
   inserted: function(el, binding) {
       let [fn, event = "click", time = 1500] = binding.value
       let timer, timer_end;
       el.addEventListener(event, () => {
           if (timer) {
               clearTimeout(timer_end);
               return timer_end = setTimeout(() => fn(), time);
           }
           fn();
           timer = setTimeout(() => timer = null, time)
       })
   }
})