高品质的网站开发公,建应用网站,电脑在哪网站接做扇子单,哪家app定制开发好1、先看一效果#xff1a;
2、实现思路#xff1a;
使用定时器setTimeout和闭包实现常规防抖功能#xff1b;增加immediate字段控制第一次是否执行一次函数#xff08;true or false#xff09;#xff1b;增加一个flag标识#xff0c;在第一次执行时#xff0c;将标…1、先看一效果
2、实现思路
使用定时器setTimeout和闭包实现常规防抖功能增加immediate字段控制第一次是否执行一次函数true or false增加一个flag标识在第一次执行时将标识标识为true同时通过使用定时器设置flagfalse防止用户是一次一次地触发导致下一轮第一次无法触发事件在第二次触发回调函数时将flag设置false为了第二轮触发防抖时第一次也会执行函数。
3、防抖函数实现
// 自定义防抖函数支持传入等待时间(wait)、立即执行标识(immediate)等参数。
export const customDebounce function (fn: Function,wait 500,immediate: boolean
) {let timeID: number | null;let flag false;return function (...args: any[]) {// 控制每轮第一次进来时都会执行一次函数flagtrue并returnif (!timeID !flag immediate) {fn.apply(this, args);flag true;// 设置一个定时器在wait毫秒后将flag设置为false// 防止用户每轮都是一次一次触发事件导致flag一直为true导致下一轮第一次无法再次触发事件setTimeout(() {flag false;}, wait);return;}if (timeID) {clearTimeout(timeID);}timeID setTimeout(() {fn.apply(this, args);timeID null;// 控制每轮第二次执行操作时设置flag为false// 使得下一轮进来时可以立刻执行一次函数flag false;}, wait) as unknown as number;};
};4、vue3 element-plus 组合式API单页面使用
script setup langts
import { ref } from vue;
import { customDebounce } from /utils/utils;
const inputVal ref();
const inputChange customDebounce(args {console.log(函数执行了, args);},1000,true
);
/scripttemplatediv classcustom-debounceel-input v-modelinputVal inputinputChange //div
/templatestyle scoped langscss/style
