给我讲一下js中的节流和防抖，我是新手需要讲解的很清楚

当我们在使用 JavaScript 实现一些需要频繁触发的事件时，比如滚动事件、resize事件、input输入事件等，如果我们不加控制地处理这些事件，就会导致浏览器频繁地执行相关的处理函数，从而影响页面的性能和用户的体验。此时，我们可以使用节流和防抖技术来优化这种情况。

1. 节流

节流（Throttle）是指在一定时间间隔内只触发一次事件，即使该事件在此期间内被触发多次也无效，直到时间间隔过去后，才能再次触发事件。常见的实现方式是使用 setTimeout 或 setInterval 函数来实现。

例如，我们可以使用以下代码来实现一个简单的滚动节流函数：

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

这个函数接受两个参数：要节流的函数和时间间隔。它返回一个新的函数，该函数在一定时间间隔内只能被触发一次，如果在此期间内被触发多次，那么只有第一次触发有效，其余的都被忽略。

2. 防抖

防抖（Debounce）是指在一定时间间隔内，如果事件被触发多次，那么只有最后一次触发有效，前面的触发都被忽略。常见的实现方式是使用 clearTimeout 和 setTimeout 函数来实现。

例如，我们可以使用以下代码来实现一个简单的输入框防抖函数：

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

这个函数接受两个参数：要防抖的函数和时间间隔。它返回一个新的函数，该函数在一定时间间隔内，如果事件被触发多次，那么只有最后一次触发有效，前面的触发都被忽略。