vue3 debounce 作用：函数会从其被调用时延迟执行到调用结束的这段时间内，如果该函数被再次调用，则重新计算时间。

1、说明：

2、lodash的debounce

"lodash": "^4.17.21",

pnpm add lodash

<template>
    <button @click="debouncedButtonClick">Click me</button>
  </template>
   
  <script setup>
  import { debounce } from 'lodash';
   
  const debouncedButtonClick = debounce(() => {
    console.log('Button Clicked');
  }, 2000);
  </script>

多次点击按钮，会在最后一次点击以后的2s，输出Button Clicked。

2、@vueuse/core的useDebounceFn

开始使用 | VueUse 中文网

"@vueuse/core": "^11.0.3",
pnpm add @vueuse/core

  <template>
    <button @click="debouncedButtonClick">Click me</button>
  </template>
   
  <script setup>
  import {useDebounceFn} from '@vueuse/core';
   
  const debouncedButtonClick = useDebounceFn(() => {
    console.log('Button Clicked');
  }, 2000);
  </script>

3、setTimeout

<template>
  <button @click="debouncedButtonClick">Click me</button>
</template>
 
<script setup>
let timeout = null;
 
const debouncedButtonClick = () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    console.log('Button Clicked');
  }, 2000);
};
</script>

以上事例修改于baidu ai。

4、运行效果：

各种测试，多次点击按钮，会在最后一次点击以后的2s，输出Button Clicked。