vue函数防抖与节流的正确使用方法

首先，防抖和节流都是为了解决高频率触发某个事件时造成的性能问题。

什么是函数防抖

函数防抖是指在一段时间内多次触发同一个函数时，只执行最后一次触发的函数，并在指定的等待时间后再触发该函数。

函数防抖的代码示例如下：

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

其中，func是需要执行的函数，delay是等待时间，也就是函数防抖的时间窗口。如果在这个时间窗口内再次触发该函数，就会清除上一次的定时器，并重新设置一个新的定时器。

什么是函数节流

函数节流是指在一段时间内多次触发同一个函数时，间隔固定时间才执行一次函数。

函数节流的代码示例如下：

function throttle(func, delay) {
  let prev = Date.now();
  return function () {
    let now = Date.now();
    if (now - prev >= delay) {
      func.apply(this, arguments);
      prev = Date.now();
    }
  };
}

其中，func是需要执行的函数，delay是间隔时间，也就是函数节流的时间间隔。如果在间隔时间内再次触发该函数，函数将不被执行。

函数防抖和函数节流的使用场景

函数防抖适用于以下场景：

• 浏览器窗口大小改变时，防止过于频繁调用resize函数
• 文本框输入时，防止过于频繁地发起搜索请求
• 按钮狂点时，防止多次提交表单

函数节流适用于以下场景：

• 滚动事件时，防止过于频繁地触发滚动事件
• 鼠标移动事件时，防止过于频繁地触发事件
• 长按事件时，间隔一定时间后再执行相应的操作

函数防抖和函数节流的应用示例

函数防抖

在输入框中搜索时，如果用户输入的速度很快，可能会在没有完成输入时就发起了搜索请求，导致搜索结果错误或者搜索不到。我们可以使用函数防抖来解决该问题。

HTML代码：

<input type="text" id="search-input">

JS代码：

const input = document.getElementById('search-input');
// 定义搜索函数
function search() {
  console.log('search:', input.value);
  // 此处发起搜索请求
}

// 设置防抖时间间隔为500ms
const debounceSearch = debounce(search, 500);

// 输入框输入事件
input.addEventListener('input', debounceSearch);

上述代码中，我们使用debounce函数包装了search函数，并将防抖时间间隔设置为500ms。当用户输入时，每次都会先清除上一次的定时器，再设置一个新的定时器，等待防抖时间窗口结束后，才会执行search函数。

函数节流

在滚动到网页底部时，可能会触发一个函数来加载更多内容，如果没有进行函数节流，则用户在滚动时会不断地触发该函数，导致性能问题。我们可以使用函数节流来解决该问题。

JS代码：

// 定义滚动函数
function scroll() {
  console.log('scroll:', document.body.scrollTop);
  // 此处加载更多数据
}

// 设置节流时间间隔为500ms
const throttleScroll = throttle(scroll, 500);

// 滚动事件
window.addEventListener('scroll', throttleScroll);

上述代码中，我们使用throttle函数包装了scroll函数，并将节流时间间隔设置为500ms。在滚动时，每隔指定时间间隔就会执行一次scroll函数，而不是不断地触发该函数，从而避免了性能问题。