目录

一、防抖动

1、概念

2、原理

3、应用场景

---

1、概念

        通过将多次连续触发的函数调用合并成一次来减少函数的执行次数。防抖的核心思想是在某个时间段内，只执行一次函数，而忽略在此时间段内的其他触发。

2、原理

(1)、定时器；

(2)、重复调用时重置定时器；

(3)、等待时间结束，执行函数。

3、应用场景

• 按钮点击：短时间内多次点击，频繁触发事件函数。
• 输入框输入：输入实时显示，实时频繁触发搜索事件。
• 页面滚动：scroll 事件触发频繁。
• 窗口调整：resize 事件频繁触发。

4、原理

利用setTimeout和clearTimeout来控制函数的执行

5、全局封装使用

（a）、封装函数 （新建文件：debounce.ts）

// 防抖指令封装
export const useDebounce = (delay: number) => {return {beforeMount(el: HTMLElement, binding: any) {let timer: number;el.addEventListener(binding.arg, () => {clearTimeout(timer);timer = setTimeout(() => {binding.value();}, delay);});}};};

（b）、组件中使用

<template><div><input v-debounce:input="onInput" placeholder="输入内容" /><br /><button v-debounce:click="onClickDebounce">点击防抖按钮</button></div>
</template><script lang="ts" setup>
function onInput() {console.log("输入框防抖事件");
}function onClickDebounce() {console.log("防抖事件");
}</script><script lang="ts">
import { useDebounce } from "./debounce";export default {directives: {debounce: useDebounce(2000),},
};
</script><style scoped></style>