防抖和节流的区别和举例（简要说明、形象比喻、容易理解）

1、含义：

在前端开发技术中，防抖（Debounce）和节流（Throttle）是两种常用的性能优化技术，主要用于处理高频事件触发，如用户的点击、滚动、输入等操作。

防抖（Debounce）的含义：

在一定时间内，多次触发同一个事件，但只有在最后一次触发后，经过指定的等待时间，才会执行相应的事件处理函数。如果在等待时间内再次触发了该事件，则会重新开始计时，取消之前的执行计划。这种方式适用于需要等待用户停止操作后再执行的场景，比如输入框输入完成后进行搜索、窗口大小调整完成后执行布局调整等。

节流（Throttle）的含义：

在一定时间内，多次触发同一个事件，但只会执行一次事件处理函数，无论这个事件被触发了多少次。这样可以确保函数不会因为频繁触发而过于密集地执行，从而控制函数的执行频率。节流适用于需要控制函数执行频率的场景，比如滚动事件处理、鼠标移动事件、页面滚动加载等。

在前端开发中，防抖和节流可以通过原生JavaScript实现，也可以使用第三方库来实现。它们都是提高页面性能和用户体验的重要技术手段。

需要注意的是，防抖和节流虽然都可以限制函数的执行频率，但它们的工作原理和适用场景有所不同。在实际开发中，需要根据具体的需求和场景来选择使用哪种技术。

2、区别：

防抖和节流的区别如下：

防抖（debounce）：在事件被频繁触发的情况下，防抖可以保证一定时间内只触发一次回调，并且是在事件触发结束后的一定时间内触发。

如果在这个时间内再次触发事件，那么会重新计算时间，直到事件停止触发后才会执行回调。这就像坐公交车，只有当乘客都上车后，司机才会开车，如果期间有新的乘客上车，司机会等待所有乘客上车后再出发。

节流（throttle）：在事件被频繁触发的情况下，节流可以保证在一定时间内只触发一次回调。

与防抖不同的是，节流是每隔一段时间就执行一次回调，而不是在事件停止触发后执行。这就像人的眨眼睛，每隔一段时间就会眨一次，不管期间发生了什么。 总的来说，防抖和节流都是为了减少事件触发频率，优化性能。但是，防抖更注重于在事件停止触发后执行回调，而节流则是每隔一段时间就执行一次回调。在具体的应用场景中，可以根据需要选择合适的方法。

3、举例：

在vue2项目中，写一个防抖方法：

在Vue 2中，你可以创建一个防抖方法并将其用于处理频繁触发的事件。防抖通常用于限制事件触发的频率，确保在一段时间内只执行一次处理函数。以下是一个简单的防抖函数的实现，并展示如何在Vue组件中使用它：

首先，在Vue组件的methods中定义一个防抖函数：

javascript
export default {
  data() {
    return {
      // ... your data properties
    };
  },
  methods: {
    debounce(func, wait) {
      let timeout;
      return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
          func.apply(context, args);
        }, wait);
      };
    },
    // ... your other methods
    handleDebouncedEvent() {
      // 这里是防抖后的事件处理逻辑
      console.log('Debounced event handled!');
    },
  },
  // ... your other options
};

在上面的代码中，debounce 函数接受一个需要防抖的函数 func 和一个等待时间 wait（以毫秒为单位）。它返回一个新的函数，这个新函数会在指定的等待时间后执行 func，如果在这段等待时间内再次调用新函数，那么会取消之前的定时器并重新设置。

现在，你可以在模板中绑定一个事件，并使用这个防抖函数来包裹你的事件处理函数：

html
<template>
  <div>
    <!-- 假设你有一个输入框，并希望在用户停止输入一段时间后执行某个操作 -->
    <input type="text" v-model="inputValue" @input="handleDebouncedInput" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    debounce(func, wait) {
      // ... 防抖函数的实现（同上）
    },
    handleDebouncedInput: this.debounce(function() {
      // 输入防抖处理逻辑
      console.log('User stopped typing:', this.inputValue);
    }, 500), // 等待500毫秒后执行
  },
};
</script>

注意，在上面的handleDebouncedInput方法中，我们直接将防抖函数的结果（即新函数）赋值给了它。这样，每当输入框的input事件被触发时，实际上调用的是防抖包装后的函数。

不过，请注意，上面的代码在methods中直接使用了this.debounce，这可能会导致一些问题，因为this的上下文在箭头函数和普通函数中是不同的。为了确保this指向组件实例，我们可以使用箭头函数或者在组件的created或mounted生命周期钩子中绑定防抖函数。

以下是一个更稳妥的做法，在created钩子中绑定防抖函数：

javascript
export default {
  data() {
    return {
      inputValue: '',
      // ... your other data properties
    };
  },
  created() {
    this.handleDebouncedInput = this.debounce(this.handleActualInput, 500);
  },
  methods: {
    debounce(func, wait) {
      // ... 防抖函数的实现（同上）
    },
    handleActualInput() {
      // 实际的输入处理逻辑
      console.log('User stopped typing:', this.inputValue);
    },
  },
};

在模板中，你仍然绑定handleDebouncedInput作为输入事件的处理函数：

html
<input type="text" v-model="inputValue" @input="handleDebouncedInput" />

这样，当用户在输入框中输入时，实际的handleActualInput方法只会在用户停止输入500毫秒后执行一次。

在vue2项目中，写一个节流方法：

在Vue 2中，你可以编写一个节流（throttle）方法，用于限制某个函数在一段时间内的执行频率。这对于优化性能非常有用，尤其是在处理高频事件（如滚动、鼠标移动等）时。

下面是一个简单的节流方法实现，你可以将其放在Vue组件的methods中或者作为工具函数使用：

javascript
export function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    return func.apply(this, args);
  }
}

在上面的代码中，throttle函数接受两个参数：要节流的函数func和节流时间间隔delay（以毫秒为单位）。它返回一个新的函数，该函数在每次调用时会检查自上次调用以来是否已经过了指定的时间间隔。如果是，则执行原始函数；否则，直接返回并忽略调用。

你可以在Vue组件中使用这个节流方法，例如：

javascript
<template>
  <div>
    <button @click="throttledMethod">点击我</button>
  </div>
</template>

<script>
import { throttle } from './throttle';

export default {
  methods: {
    originalMethod() {
      console.log('方法被调用');
      // 在这里执行你的逻辑
    },
    throttledMethod: throttle(this.originalMethod, 200) // 设置节流时间间隔为200毫秒
  }
};
</script>

在上面的例子中，我们定义了一个originalMethod方法，它会在控制台中打印一条消息。然后，我们使用throttle方法创建了一个节流版本的originalMethod，即throttledMethod。当用户点击按钮时，会触发throttledMethod，但由于我们设置了200毫秒的节流时间间隔，所以originalMethod的实际执行频率会被限制在这个时间间隔内。