vue防抖功能

Vue 防抖功能，是一种针对前端开发的防止重复触发的技术，它能够帮助页面进行性能优化。

防抖的原理是，当一个动作被触发时，设定一个固定时间等待用户的下一个动作。如果在等待时间内，用户再次触发动作，则重新计算时间，等待下一个动作。如此一来，用户连续触发同一动作时，防抖技术能够使得只有最后一个动作被触发。

// debounce 函数接收一个函数作为参数
function debounce(func,wait) {
  let timeout;

  // 这里返回了一个新函数
  return function(...args) {
    clearTimeout(timeout);

    timeout = setTimeout(() => {
      func.apply(this,args);
    },wait);
  };
}

// 调用 debounce 函数
const myFunction = debounce(() => {
  console.log('这里是我的函数');
},1000);

// 假设您需要点击两次才能触发该函数
myButton.addEventListener('click',myFunction);

在此例子中，我们使用了一个名为 debounce 的函数，在该函数中设定了等待时间 wait。然后，我们定义了一个新函数，该函数的名称为 myFunction。每当我们调用 myFunction 而不是立即调用我们传入的函数（这里是一个简单的 console.log），debounce 函数会将新的函数添加到 pass 中，在 wait 时间后执行它。

这就是 Vue 防抖技术的工作原理——我们定义一个函数，该函数在下一次调用之前必须等待一段时间。这样，当我们需要触发的事件传递给该函数时，我们可以将其传递给防抖函数，在其预设时间结束前，不会被执行。

下面我们看一下如何在 Vue 中使用防抖技术。

在上面的代码中，我们定义了一个搜索框，在输入框的 @input 事件中，我们将搜索请求推迟了 500 毫秒。debounce 返回一个函数，该函数具有我们的搜索逻辑。此外，我们还定义了一个名为 debouncedSearch 的响应式数据，当我们在 input 事件中调用它时，它返回一个防抖函数。

这就是 Vue 防抖功能的基本应用。我们将搜索事件传递给 debounce 函数，它确保在 500 毫秒之后才会被操作。确保我们的搜索事件只在我们完成输入后有效。如果您需要更详细的防抖选项，请查看 lodash 中的防抖选项。