vue 节流&防抖 自定义指令|函数|ts装饰器

一、vue自定义指令

 1、directive/index.js

export default function initDirective(vue) {
    /** 节流 */
    vue.directive('throttle', {
        inserted: function (el, binding) {
            let stop = false;
            el.addEventListener(binding.arg, (e) => {
                if (stop) return;
                binding.value(e)
                stop = true;
                setTimeout(() => {
                    stop = false
                }, 500)
            })
        }
    })
    /** 防抖 */
    vue.directive('debounce', {
        inserted: function (el, binding) {
            let stopTime;
            el.addEventListener(binding.arg, (e) => {
                clearTimeout(stopTime);
                stopTime = setTimeout(binding.value, 200, e)
            })
        }
    })
}

2、main.js

import Vue from 'vue'
import App from './App.vue'
import initDirective from '@/directive' // 引入
Vue.config.productionTip = false

initDirective(Vue); 执行创建自定义指令

new Vue({
  render: h => h(App),
}).$mount('#app')

<div id="app">
    <div ref="Parent" class="Parent" v-throttle:mousemove="mousemove">
    </div>
    <div ref="Parent" class="Parent" v-debounce:click="Parent"></div>
</div>

注：v-throttle&&v-debounce 冒号（:）之后 为事件名称，等号（=）之后为绑定的事件。

二、函数

1、防抖

function clickFn(){
    console.log('点击')
}
function debounce(callBack) {
    let time
    return function (...props) {
        clearTimeout(time)
        let slef = this;
        time = setTimeout(() => {
            callBack.apply(slef, props)
        }, 300)
    }
}
const fn = debounce(clickFn)

2、节流

function clickFn(){
    console.log('点击')
}
function throttle(callBack) {
  let stop = false;
  return function (...props) {
    if (stop) return;
    callBack.apply(this, props);
    stop = true;
    setTimeout(() => {
      stop = false;
    }, 300);
  };
}
const fn = throttle(clickFn)

三、ts装饰器

1、防抖

function debounce(
    target: any,
    propertyKey: string,
    descriptor: PropertyDescriptor,
) {
    let time
    const oldValue = descriptor.value
    descriptor.value = function(...props) {
        clearTimeout(time)
        time = setTimeout(() => {
            oldValue.apply(this, props)
        }, 300)
    }
}

2、节流

function debounce(
    target: any,
    propertyKey: string,
    descriptor: PropertyDescriptor,
) {
    let stop = false;
    const oldValue = descriptor.value
    descriptor.value = function (...props) {
        if (stop) return;
        oldValue.apply(this, props);
        stop = true;
        setTimeout(() => {
          stop = false;
        }, 300);
  };
}