写一个防抖函数

防抖函数的作用是在一定时间内，如果事件被触发多次，只执行最后一次。

以下是一个简单的防抖函数实现：

function debounce(func, wait) {
  let timeout;

  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

上面的函数接受两个参数：

- `func`：要执行的函数；
- `wait`：等待的时间（单位：毫秒）。

返回一个新的函数，在这个新函数内部，通过 `setTimeout` 来实现防抖的效果。

当调用新函数时，会首先清除之前的 `timeout`，然后重新设置一个新的 `timeout`。如果在 `wait` 毫秒内再次调用该函数，就会清除之前的 `timeout`，重新设置一个新的 `timeout`，直到 `wait` 毫秒内没有再次调用该函数，才会执行 `func`。

相关问题

使用js写一个防抖函数

使用 JavaScript 实现防抖函数的方法是：首先定义一个函数，并在其中定义一个定时器；然后在函数的末尾添加一个 if 语句，如果定时器存在，则清除定时器；最后在 if 语句外部添加一个定时器，在执行函数之后设定一个延时。这样，函数执行完毕后，延时过程中如果有新的函数调用，则取消上一次的延时，重新设定新的延时，从而实现了防抖函数。

用vue写一个防抖函数

好的，我可以为您编写一个用 Vue.js 编写的防抖函数。在 Vue.js 中，可以使用 debounce 函数来实现防抖功能。下面是一个基本的示例代码：

import { debounce } from 'lodash-es';

export default {
  data() {
    return {
      searchQuery: '',
    };
  },
  methods: {
    handleSearch: debounce(function() {
      // 在这里执行你的搜索操作
      console.log('搜索：', this.searchQuery);
    }, 500),
  },
};

在这个示例中，我们将 lodash 库中的 debounce 函数导入到 Vue 组件中，并在 methods 中创建了一个名为 handleSearch 的方法，并将 debounce 函数包裹在其中。这个函数的作用是延迟执行 handleSearch 方法，直到一定时间内没有用户操作发生。这里的时间间隔是 500 毫秒。

当用户在搜索框中输入内容时，每次输入都会触发 handleSearch 方法。由于我们使用了防抖函数，因此在用户持续输入时，只有最后一次输入会触发实际的搜索操作。

希望这个例子对您有所帮助！