1.Vue 防抖及节流指令

1.节流指令 

定义节流指令

import Vue from 'vue'
// 防止表单重复提交指令
export const throttle = Vue.directive('throttle', {
  inserted: function (el, binding) {
    let [event, fn, delay] = binding.value
    if (!delay) {
      delay = 2000
    }
    let timer = null
    el.addEventListener(event, () => {
      if (timer) return
      timer = setTimeout(() => {
        fn()
        timer = null
      }, delay)
    }, true)
  }
})

这里是全局注册 

//main.js
import { throttle } from './directive'

Vue.use(throttle)

组件内使用 

<template>
  <div>

    <button v-throttle="['click',sayHello,3000,'节流']">点击我打招呼</button>
    <button v-debounce="['click',sayHello,1000,'防抖']">点击我打招呼-防抖</button>
  </div>
</template>

<script>
export default {
  methods: {
    sayHello (value) {
      console.log('你好！' + value)
    }
  }
}
</script>

2.防抖指令

// 防抖
export const debounce = Vue.directive('debounce', {
  inserted: function (el, binding) {
    let [event, fn, delay, args] = binding.value
    if (!delay) {
      delay = 2000
    }
    let timer = null
    el.addEventListener(event, () => {
      clearTimeout(timer)
      timer = setTimeout(() => {
        fn(args)
      }, delay)
    }, true)
  }
})

<template>
  <div>

    <button v-throttle="['click',sayHello,3000,'节流']">点击我打招呼</button>
    <button v-debounce="['click',sayHello,1000,'防抖']">点击我打招呼-防抖</button>
  </div>
</template>

<script>
export default {
  methods: {
    sayHello (value) {
      console.log('你好！' + value)
    }
  }
}
</script>

注意

addEventListener 方法的第三个参数可以是一个布尔值、一个对象，或者是省略不填。

1.布尔值
addEventListener 方法的第三个参数是一个布尔值，表示事件是在捕获阶段还是在冒泡阶段处理。

如果这个参数为 true，那么事件是在捕获阶段处理的；如果这个参数为 false（或者省略不填），那么事件是在冒泡阶段处理的。

在捕获阶段和冒泡阶段中，事件处理程序可以通过 event 对象的 phase 属性来识别当前所处的阶段。如果 phase 属性的值为 1，则代表捕获阶段；如果 phase 属性的值为 2，则代表目标阶段；如果 phase 属性的值为 3，则代表冒泡阶段。

2.对象
这个对象可以包含三个属性：

capture：布尔值，表示监听器是否在捕获阶段执行。
once：布尔值，表示监听器是否仅执行一次。
passive：布尔值，表示监听器不会调用 preventDefault()。