vue2防抖和节流封装函数

Vue2中的防抖和节流是常用的函数封装技巧，用于控制事件的触发频率，提升性能和用户体验。

1. 防抖函数（Debounce）：
防抖函数的作用是在事件触发后等待一段时间，如果在这段时间内再次触发了该事件，则重新计时。只有在事件停止触发一段时间后才会执行相应的操作。

下面是一个简单的Vue2防抖函数封装示例：

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

使用示例：

// 在Vue组件中使用防抖函数
methods: {
  handleClick: debounce(function() {
    // 执行需要防抖的操作
  }, 300)
}

2. 节流函数（Throttle）：
节流函数的作用是在一定时间内只执行一次操作，无论事件触发频率多高，都会按照固定的时间间隔执行。

下面是一个简单的Vue2节流函数封装示例：

function throttle(func, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

使用示例：

// 在Vue组件中使用节流函数
methods: {
  handleClick: throttle(function() {
    // 执行需要节流的操作
  }, 300)
}