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。

猜你喜欢

转载自blog.csdn.net/jwbabc/article/details/143276194