防抖与节流的使用

防抖节流在我们做项目优化时也是不可或缺，下面我们来看看怎么使用

防抖和节流是两种常用的优化高频触发事件的方法。

防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，函数才会执行一次，如果在这个时间段内又触发了事件，则会重新开始延时。

function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context, args);
    }, wait);
  };
}

使用示例：

function handleClick() {
  console.log('clicked');
}

const debouncedHandleClick = debounce(handleClick, 500);
document.addEventListener('click', debouncedHandleClick);

节流（throttle）：当持续触发事件时，保证在一定时间内只触发一次事件。比如用户一直点击按钮，每隔1秒触发一次事件。

function throttle(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    if (!timeout) {
      timeout = setTimeout(function() {
        timeout = null;
        func.apply(context, args);
      }, wait);
    }
  };
}

使用示例：

function handleScroll() {
  console.log('scrolling');
}

const throttledHandleScroll = throttle(handleScroll, 500);
window.addEventListener('scroll', throttledHandleScroll);

希望对你们有帮助