节流与防抖在vue中的应用

这是今天面试时被点拨的一点，自定义指令封装节流防抖函数

非自定义指令版节流

// debounce.js
export const debounce = function (fn, delay) {
    let timer = null
    let immediate = true
    return function () {
        const _this = this
        if (immediate) {
            fn.apply(_this)
            immediate = false
        } else {
            clearTimeout(timer)
            timer = setTimeout(function () {
                fn.apply(_this)
            }, delay);
        }

    }
}

// 某个.vue文件
import { debounce } from '../utils/debounce'

methods: {
    test: debounce(function () {
        this.count++
    }, 1000),
}

自定义指令节流

// debounce.js
import Vue from 'vue'

Vue.directive('debounce', {
    inserted(el, binding) {
        let {
            fn,
            event = "click",
            delay = 800
        } = binding.value;
        let timer = null;
        let immediate = true
        el.addEventListener(event, function () {
            if (immediate) {
                fn()
                immediate = false
            } else {
                clearTimeout(timer)
                timer = setTimeout(function () {
                    fn()
                }, delay)
            }

        })
    }
})

// main.js
import "@/directive/debounce"

// 某个.vue文件
<button v-debounce="{ fn: test, delay: 1000 }">click</button>

非自定义指令版防抖

// throttle.js
export const throttle = function (fn, delay) {
    let timer = null;
    return function () {
        const _this = this
        if (!timer) {
            timer = setTimeout(function () {
                fn.apply(_this)
                timer = null;
            }, delay);
        }
    }
}

// 用法同上

自定义指令版防抖

import Vue from 'vue'

Vue.directive('throttle', {
    inserted(el, binding) {
        let {
            fn,
            event = "click",
            delay = 800
        } = binding.value;
        let timerB = null;
        let flag = true
        el.addEventListener(event, () => {
            if (flag) {
                flag = false
                fn.apply(this, arguments);
                timerB = setTimeout(() => {
                    flag = true
                    clearTimeout(timerB);
                    timerB = null
                }, delay);
            }
        });
    },
});