JS防抖和节流实例解析

什么是防抖和节流？

在介绍防抖和节流实例前，我们先了解一下这两个概念。防抖和节流都是为了解决高频触发某个函数而导致资源占用过多的问题。

防抖：指触发事件后在n秒内函数只执行一次，如果n秒内再次触发事件，则会重新计算函数的执行时间。

节流：指连续触发事件但是在n秒内只执行一次函数，所以节流会稀释函数的执行频率。

防抖的例子

搜索框实时搜索

当用户输入关键字进行搜索的时候，每输入一个字母都会向服务器发送一次请求，如果输入速度很快，那么就会频繁的对服务器进行请求。这时候我们可以使用防抖函数来控制搜索请求的频率。

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

// debounce调用
input.addEventListener('input', debounce(function() {
  // 搜索请求
}, 500));

上面的代码中，debounce函数实现了防抖的逻辑，当用户输入时，debounce会在500ms内不再有输入再进行搜索请求。

节流的例子

滚动加载数据

当用户滚动页面到底部时，会触发加载数据的事件，如果没有节流操作，那么会出现用户连续滚动，数据不断加载的情况。

function throttle(fn, delay) {
  let timer = null;
  let start = new Date().getTime();
  return function() {
    const end = new Date().getTime();
    const context = this;
    const args = arguments;
    if (timer) clearTimeout(timer);
    if (end - start >= delay) {
      fn.apply(context, args);
      start = end;
    } else {
      timer = setTimeout(function () {
        fn.apply(context, args);
      }, delay);
    }
  };
}

// throttle调用
window.addEventListener('scroll', throttle(function() {
  // 加载数据操作
}, 500));

上面的代码中，throttle函数实现了节流的逻辑，当用户滚动到底部时，throttle会在500ms内只加载一次数据。

结论

防抖和节流都是为了解决高频触发某个函数而导致资源占用过多的问题。在实际应用中，防抖可以用来控制高频触发的事件，比如搜索框实时搜索；节流可以用来控制某些连续触发的事件，比如滚动加载数据。