Vue3中的防抖和节流

      防抖或者节流的作用：一是为了防止用户频繁操作；二是为了节约一定的服务器资源，减少资源浪费的情况。

customRef 函数

• 使用 customRef 函数创建一个自定义的 ref ，并对其依赖项跟踪和更新触发进行显示控制

• customRef 接收一个函数作为参数，这个函数接收两个函数作为参数 track (通知vue需要追踪后续内容的变化) 和 trigger (通知vue重新解析模板)

防抖函数(debounce):

import { customRef, ref } from 'vue';

const debounceRef = (data, delay = 500) => {
    // 创建定时器
    let timer = null;
    // customRef 中会返回两个函数参数。一个是：track 在获取数据时收集依赖的；一个是：trigger 在修改数据时进行通知派发更新的。
    return customRef((track, trigger) => {
        return {
            get() {
                // 收集依赖
                track();
                // 返回当前数据
                return data;
            },
            set(val) {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    // 修改数据
                    data = val;
                    // 派发更新
                    trigger();
                }, delay);
            }
        }
    });
}

const val = debounceRef('', 1000);

页面实现:

节流函数(throttle)

const throttleRef = (data, delay = 500) => {
    // 创建定时器
    let timer = null;
    // customRef 中会返回两个函数参数。一个是：track 在获取数据时收集依赖的；一个是：trigger 在修改数据时进行通知派发更新的。
    return customRef((track, trigger) => {
        return {
            get() {
                // 收集依赖
                track();
                // 返回当前数据
                return data;
            },
            set(val) {
                if (timer) {
                    return;
                }
                timer = setTimeout(() => {
                    timer = null;
                }, delay);
                // 修改数据
                data = val;
                // 派发更新
                trigger();
            }
        }
    });
};

const inputVal = throttleRef('', 1000);

页面实现: