前端防抖函数 vue 2

在Vue 2中，可以使用防抖函数来限制频繁触发某些事件的执行，具体实现可以参考下面的代码：

// 防抖函数
function debounce(fn, wait) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, wait);
  };
}

// 在Vue组件中使用防抖函数
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    // 在input输入框输入时触发
    handleInput: debounce(function(event) {
      console.log('input value:', event.target.value);
    }, 500)
  }
}

在上面的代码中，我们实现了一个防抖函数`debounce`，它接受两个参数：要执行的函数和等待的时间。在Vue组件中，我们定义了一个`handleInput`方法，并使用`debounce`函数对其进行了包装，这样当我们在`input`输入框中输入时，如果500ms内没有再次输入，`handleInput`方法才会被执行。这样就可以有效地减少事件的频繁触发，提升性能。

相关问题

前端 vue 防抖和节流

前端开发中，防抖和节流是两种常用的优化技术，用于限制函数的执行频率，提升页面性能。

防抖（debounce）：指触发事件后在一定时间内函数只执行一次，如果在这段时间内又触发了该事件，则会重新计算函数执行时间。防抖常用于输入框搜索、页面滚动等频繁触发事件的场景。

实现代码如下：

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

节流（throttle）：指连续触发事件但是在一定时间内只执行一次函数。节流常用于页面的滚动、窗口的resize等连续触发事件的场景。

实现代码如下：

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

需要注意的是，防抖和节流的实现都使用了闭包来保存计时器变量，以及返回一个新的函数。在实际应用中，可以根据具体的需求来选择使用哪种优化技术。

前端 vue 防抖和节流，请用具体代码来实现

好的，下面是使用具体代码实现防抖和节流的例子：

防抖：

// 防抖函数
function debounce(fn, delay) {
  let timer = null; // 定时器变量
  return function() {
    clearTimeout(timer); // 每次触发时先清除上一次的定时器
    timer = setTimeout(() => {
      fn.apply(this, arguments); // 用apply指向调用debounce的对象，相当于_this.fn(arguments);
    }, delay);
  };
}

// 使用防抖函数
let input = document.getElementById('input');
let debounceFn = debounce(() => {
  console.log(input.value);
}, 1000);
input.addEventListener('input', debounceFn);

上面的代码实现了一个`debounce`函数，它接收两个参数：需要执行的函数和等待的时间。每次调用`debounceFn`函数时，如果在等待时间内有新的调用，则会清除上一次的定时器并重新开始计时，直到等待时间结束后才会执行实际的函数。

节流：

// 节流函数
function throttle(fn, delay) {
  let timer = null; // 定时器变量
  return function() {
    if (!timer) { // 如果定时器不存在，则执行函数并设置定时器
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

// 使用节流函数
let scrollFn = () => {
  console.log('scroll');
};
let throttleFn = throttle(scrollFn, 1000);
window.addEventListener('scroll', throttleFn);

上面的代码实现了一个`throttle`函数，它接收两个参数：需要执行的函数和等待的时间。每次调用`throttleFn`函数时，如果定时器不存在，则执行实际的函数并设置定时器，等待时间结束后再次执行实际的函数。如果在等待时间内有新的调用，则不会执行实际的函数，直到等待时间结束后才会重新开始计时。