JS函数节流和函数防抖问题分析

函数节流

函数节流是指在一定时间内只执行一次该函数。即使该函数被连续调用多次，但在规定的时间内，它只会执行一次。

函数节流比较适用于一些高频率触发的操作，例如：

• 滚动页面时触发的事件（scroll事件）；
• 缩放浏览器窗口时触发的事件（resize事件）；
• 拖动元素时触发的事件（drag事件）等。

下面是一个函数节流的示例代码：

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

function handleScroll() {
  console.log('scroll event triggered');
}

window.addEventListener('scroll', throttle(handleScroll, 1000));

上面的代码中，我们定义了一个throttle函数，用于返回一个新函数，这个新函数具有函数节流的功能。我们将原始函数作为参数传入throttle函数，并传入一个时间间隔delay。当原始函数被连续调用时，新函数会将前一个时间段内的所有调用忽略，并等待一个时间间隔后再执行一次。

函数防抖

函数防抖是指在一段时间内，多次触发同一事件，只执行最后一次该事件的处理。也就是说，当高频率触发事件时，只会执行一次该事件的处理。

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

• 搜索框输入实时搜索，可以设置一定的延迟时间，当用户连续输入时，只有等用户停止输入后，再去请求数据；
• 按钮防抖，例如防止用户连续快速点击多次提交按钮等。

下面是一个函数防抖的示例代码：

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

function handleInput() {
  console.log('search input change');
}

const inputElem = document.querySelector('#search-input');
inputElem.addEventListener('input', debounce(handleInput, 500));

上面的代码中，我们定义了一个debounce函数，用于返回一个新函数，这个新函数具有函数防抖的功能。我们将原始函数作为参数传入debounce函数，并传入一个时间间隔delay。当原始函数被连续调用时，新函数会在每次调用时清除前一个时间间隔内的定时器，并重新设置一个新的定时器。这样，在规定的时间间隔内，如果多次触发事件，它只会执行最后一次事件处理。