vue中的防抖

在开发中我们经常会遇到这样的需求，比如点击一个按钮，当用户点击多次等待用户间隔时间大于一秒钟的时候执行。或者输入框中等待用户停止输入的时间为大于一秒钟的时间，获取用户最终的值。这其实就是防抖的一个例子。 其实，防抖说的很高大上，简单点说这就是一个延时器的实现。下面我记录一下通过vue2和vue3 来时先输入框和点击时间的防抖。

vue的官方文档有记录，说vue内置中并没有防抖的功能，可以借助debounce这个库来做防抖，但是其实如果只是做一个防抖就没有必要引入一个库，虽然这个库是很常用的，很多项目中都会用到。但是我们这里就手写一个防抖 vue2版本的代码如下：

// 函数防抖
export function debounce(fn, wait) {
    let timeout = null;
    wait = wait || 600;
    return function () {
        let that = this;
        if (timeout !== null) clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(that); 
        }, wait);
    }
}

vue3中的防抖和2的区别不大，最近学了vue3中的一个新的组合api --customRef 他的含义就是自定义ref。代码如下：

 function myRef(value) {
            let timer;
            return customRef((tracker, trigger) => {
                return {
                    get() {
                        tracker();
                        return value;
                    },
                    set(newValue) {
                        clearTimeout(timer);
                        timer = setTimeout(() => {
                            value = newValue;
                            trigger();
                        }, 500);
                    },
                };
            });
        }

下面是vue3 中的具体代码，实现的功能是 input框里 停止输入了 下面展示出输入的内容。

<template>
    <input type="text" v-model="keyword">
    <h3>{{keyword}}</h3>
    <hr>
</template>

<script>
import demo from "./components/demo.vue";
import { ref, reactive, customRef } from "vue";
export default {
    name: "App",
    components: { demo },
    setup() {
        let keyword = myRef("你好");
        function myRef(value) {
            let timer;
            return customRef((tracker, trigger) => {
                return {
                    get() {
                        tracker();
                        return value;
                    },
                    set(newValue) {
                        clearTimeout(timer);
                        timer = setTimeout(() => {
                            value = newValue;
                            trigger();
                        }, 500);
                    },
                };
            });
        }

        return {
            keyword,
        };
    },
};
</script>

以上就是防抖的实现，其实就是一个定时器，最主要的就是消除定时器。