Vue3 + TS 防抖动

目录

一、防抖动

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>