debounce

函数描述

防抖函数

基础用法

 import { debounce } from "@zhonghe/utils"

  // 高频触发的函数
 function fn() {}

// 防抖处理
 const debounceFn = debounce(fn, 1000);

类型声明

/**
 * @description 创建一个防抖函数，用于延迟执行目标函数
 * @param {Function} targetFunction - 要执行的目标函数
 * @param {number} delay - 防抖的延迟时间，默认为 200 毫秒
 * @param {boolean} immediate - 是否使用立即执行模式，默认为 false，即延迟执行模式
 * @returns {Function} - 新的防抖函数
 */
declare function debounce(targetFunction: Function, delay?: number, immediate?: boolean): (...args: any[]) => void;

线上demo

防抖函数

防抖函数实际应用

输入的内容：

<script lang="ts" setup>
import { debounce } from '@zhonghe/utils';
import { ref, onMounted } from 'vue';
const content = ref<string>('');
const inputDom = ref<HTMLInputElement | null>(null);
const inputChange = () => {
  content.value = inputDom.value?.value as string;
};
onMounted(() => {
  inputDom.value?.addEventListener('input', debounce(inputChange, 500));
});
</script>

<template>
  <div>
    <div style="margin-bottom: 4px">输入的内容：{{ content }}</div>
    <input ref="inputDom" type="text" placeholder="请输入内容" />
  </div>
</template>

<style scoped>
input {
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-bg);
  color: var(--vp-c-text-1);
  padding-left: 4px;
  font-size: 14px;
  border-radius: 4px;
}

input:focus {
  border: 1px solid var(--vp-c-brand);
  transition: all 0.3s linear;
}
</style>