在 Vue 中如何使用防抖业务需求中，有一个功能是点击<div>执行sdk方法，吊起系统的拍照功能，在吊起的时候，会存在

业务需求中，有一个功能是点击

执行sdk方法，吊起系统的拍照功能，在吊起的时候，会

存在时间差，为了防止用户频繁点击，需要加上防抖的功能。

<template>
    <div @click="uploadPic">点击吊起系统拍照</div>
</template>

methods: {
    uploadPic: vueDebounce('wakeUpPhotos', 2000, true),
    wakeUpPhotos () {
        // todo 执行sdk方法，及回调逻辑
    }
}

vueDebounce (fnName, time, immediate) {
    let timer = null
    return function () {
        let args = arguments
        if (timer) { clearTimeout(timer) }
        // 判断是否需要立即执行
        if (immediate) {
            timer = setTimeout(() => {
                timer = null
            }, time)
            if (!timer) { this[fnName](...args) }
        } else {
            timer = setTimeout(() => {
                this[fnName](...args)
            }, time)
        }
    }
}

关键点：

**fnName**，是vue中methods的名称，不可以直接传回调函数，是因为this指向会不对
执行回调的时候this指的是当前创建的vue对象，所以可以取到fnName对应的回调方法
由于业务需求，所以一般都会加上立即执行的功能~