js节流函数与防抖函数

防抖函数和节流函数都是为了解决JavaScript中频繁触发事件而导致的性能问题，但它们的实现方式和使用场景有所不同。

一、防抖函数

防抖函数的作用是在事件触发后一定时间内没有再次触发该事件时，才执行处理方法。简单来说，就是在最后一个事件被触发后，还要等待一段时间，如果这段时间内没有再次触发事件，才执行相应的处理方法。

实现防抖函数的关键点在于设置一个定时器，在事件被触发时先清除之前设置的定时器，然后重新设置一个新的定时器，当计时器到期后执行相应的处理方法。

防抖函数适合处理诸如窗口调整、滚动等连续触发事件，并且只需要处理最后一次事件的情况。

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

二、节流函数

节流函数的作用是在一定时间间隔内最多只能触发一次事件。换句话说，就是限制事件触发的频率，避免过多的事件处理，从而提高效率。

实现节流函数的关键点在于设置一个标记变量，用来表示当前是否可以执行处理方法。当事件被触发时，先判断标记变量的值，如果为真，则执行相应的处理方法，并将标记变量设为假，然后等待一段时间后再将标记变量设为真。

节流函数适合处理诸如鼠标移动、窗口滚动等连续触发事件，并且需要限制事件处理频率的情况。

function throttle(fn, delay) {
  let flag = true;
  return function () {
    let context = this;
    let args = arguments;
    if (flag) {
      flag = false;
      setTimeout(function () {
        fn.apply(context, args);
        flag = true;
      }, delay);
    }
  };
}

三、调用方法

使用防抖函数和节流函数的时候，需要传入两个参数：处理方法和时间间隔。

防抖函数的调用示例：

function handle() {
  console.log('handle');
}

let debounceHandle = debounce(handle, 300); // 将原来的处理方法传入防抖函数，并指定时间间隔

element.addEventListener('scroll', debounceHandle); // 将防抖处理方法绑定到事件上

节流函数的调用示例：

function handle() {
  console.log('handle');
}

let throttleHandle = throttle(handle, 500); // 将原来的处理方法传入节流函数，并指定时间间隔

element.addEventListener('scroll', throttleHandle); // 将节流处理方法绑定到事件上

本文以监听dom元素的滚动事件为例，先将原始的处理方法 handle 传入防抖或者节流函数，并由新的函数返回。然后将返回的函数作为事件处理方法，并绑定到dom元素上。这样每次触发事件时就会执行防抖或者节流处理方法，从而达到优化性能的目的。