Vue自定义指令-防抖节流

Vue2版本

// 防抖

// <el-button v-debounce="[reset,'click',300]" ></el-button>

// <el-button v-debounce="[reset]" ></el-button>

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)

    })

  }

})

// 节流

// <el-button v-debounce="[reset,'click',300]" ></el-button>

// <el-button v-debounce="[reset]" ></el-button>

Vue.directive('throttle', {

  inserted: function (el, binding) {

    let [fn, event = 'click', time = 300] = 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)

    })

  }

})

Vue3版本

// 防抖指令

app.directive('debounce', { beforeMount(el, binding) {

let [fn, event = 'click', time = 300] = binding.value;

let timer;

el.addEventListener(event, () => {

if (timer) clearTimeout(timer); timer = setTimeout(() => fn(), time); }); } });

// 节流指令

app.directive('throttle', { beforeMount(el, binding) {

let [fn, event = 'click', time = 300] = 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); }); } });