useDebounce

Introduction

防抖函数

Basic Usage

import { useDebounce } from '@flypeng/tool/browser';
const deBounceFunction = useDebounce(() => {}, 1000);

Online Demo

useDebounce

防抖函数：Input频繁搜索的案例

输入的内容：

<script lang="ts" setup>
import { useDebounce } from '@flypeng/tool/browser';
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', useDebounce(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>

Type Declaration

/**
 * 防抖函数
 * @param callback
 * @param delay （单位：毫秒）
 */
declare function useDebounce(callback: Function, delay: number): () => void;