js 防抖 vue3

以下是JS防抖的实现方式：

function debounce(func, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      func.apply(context, args);
    }, delay);
  }
}

以上代码中，`debounce`函数接受两个参数：`func`和`delay`。`func`是需要进行防抖处理的函数，`delay`是防抖的时间间隔。在返回的函数中，使用`setTimeout`函数来延迟执行`func`函数，并且在每次调用时都清除之前的定时器，确保只有最后一次调用才会执行。

以下是Vue3中使用防抖的例子：

<template>
  <div>
    <input type="text" v-model="keyword" @input="handleInput" />
  </div>
</template>

<script>
import { ref } from 'vue';
import { debounce } from 'lodash';

export default {
  setup() {
    const keyword = ref('');
    const handleInput = debounce(() => {
      console.log(keyword.value);
    }, 500);
    return {
      keyword,
      handleInput
    }
  }
}
</script>

以上代码中，使用了Vue3的`ref`函数来创建响应式数据`keyword`，并且使用了`lodash`库中的`debounce`函数来对`handleInput`函数进行防抖处理。在每次输入时，`handleInput`函数都会被延迟执行500毫秒，确保只有最后一次输入才会触发函数。