JS防抖和节流，提高性能的秘诀

防抖和节流都是前端开发中常用的优化技术，能够有效地降低页面的性能消耗和提升用户体验。本文将详细介绍防抖和节流的概念、原理、应用场景以及代码示例。

一、防抖

概念
防抖是指在事件触发后一段时间内没有再次触发事件，才会执行事件处理函数。防抖的作用是减少函数的执行次数，避免函数的频繁执行导致页面卡顿等问题。

原理
防抖的原理很简单，就是使用定时器，在事件触发后一段时间内如果没有再次触发事件，就执行事件处理函数。如果在这段时间内再次触发事件，就清除定时器重新计时。

应用场景
防抖可以用在用户输入、滚动事件、窗口调整等频繁触发的事件中。比如，当用户在搜索框中输入内容时，可以使用防抖技术避免每输入一个字符就向服务器发送请求，而是在用户停止输入一段时间后再发送请求。

代码示例
下面是一个防抖的实现代码：

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

// 使用防抖处理输入框的输入事件
const input = document.querySelector('input');
input.addEventListener('input', debounce(function() {
  console.log('debounce');
}, 1000));

上面的代码实现了一个 debounce 函数，接收一个函数和一个时间间隔参数 delay，返回一个新函数。在调用新函数时，会先清除之前的定时器，再设置一个新的定时器，延迟时间为 delay，如果在延迟时间内再次调用新函数，就清除之前的定时器，重新计时。

二、节流

概念
节流是指在一定时间内只执行一次事件处理函数。与防抖不同的是，节流是按照一定的时间间隔来执行函数，而不是等待一段时间后执行函数。

原理
节流的原理也很简单，就是使用定时器，在一定时间间隔内只执行一次事件处理函数。如果在这段时间内再次触发事件，就等待下一次时间间隔到达后再执行事件处理函数。

应用场景
节流可以用在滚动事件、窗口调整等频繁触发的事件中。比如，在页面滚动时，可以使用节流技术来降低滚动事件的触发频率，提高页面性能和用户体验。

代码示例

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

上述实现方式中，delay表示时间间隔，fn表示需要执行的函数。在函数内部，如果timer不存在，则会在delay毫秒后执行fn函数并把timer置为空。如果在delay毫秒内再次触发函数，则不会执行函数，直到delay毫秒后执行一次函数并把timer置为空。

下面是一个使用节流函数的例子：

function handleScroll() {
  console.log('scroll');
}
window.addEventListener('scroll', throttle(handleScroll, 500));

在上面的例子中，handleScroll是需要执行的函数，500是时间间隔。当用户在浏览器中滚动时，函数handleScroll最多每500毫秒执行一次，不会频繁地执行。这可以有效地降低浏览器的负载。