手写一个防抖和节流函数 并说一下他们的作用

### 回答1：

这是一个典型的防抖和节流函数：function debounce(func, wait = 20, immediate = true) {
let timeout; return function() {
let context = this, args = arguments;
let later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};防抖函数(debounce)：用于控制函数在一定时间内只能触发一次，在这段时间内，如果再次调用，则会取消上一次的调用，等到调用的间隔超过一定时间后，才会真正的触发。节流函数(throttle)：用于控制函数在一定时间内只能触发一次，在这段时间内，如果再次调用，则会取消上一次的调用，但是不会取消下一次的调用，等到调用的间隔超过一定时间后，才会真正的触发。

### 回答2：
防抖和节流是常用于前端开发的两个函数，用于优化页面的性能和用户体验。

防抖函数的作用是防止某个事件在短时间内频繁触发，减少不必要的计算和请求，只执行最后一次触发事件的操作。防抖函数的实现原理是设置一个定时器，在事件触发后等待一段时间，如果在此期间再次触发了该事件，则重新计时，直到事件触发的间隔大于等于设定的等待时间，才执行对应的操作。这种方式可以用于处理输入框输入时的自动搜索提示，滚动页面时触发的加载更多等场景。

节流函数的作用是限制某个事件在一段时间内的触发次数，减少处理的频率，限制资源的消耗。节流函数的实现原理是通过设置一个定时器，在事件触发后设定的时间间隔内，无论事件触发多次，只执行一次对应的操作。这种方式可以用于处理页面滚动、窗口调整大小等事件的处理，保持操作的可靠性和稳定性。

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

function debounce(fn, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  };
}

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

function throttle(fn, interval) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(function() {
        fn();
        timer = null;
      }, interval);
    }
  };
}

以上是两个比较常见的函数，用于优化页面性能和用户体验。在实际开发中，可以根据具体的需求和场景选择适当的防抖和节流策略，以提升页面的响应速度和用户交互的流畅性。

### 回答3：
防抖和节流函数是前端开发常用的两种函数优化技巧。它们的作用是对频繁触发的函数进行优化，减少资源的消耗和提高性能。

防抖函数的作用是对于频繁触发的函数，只在最后一次触发后的一段时间内执行该函数，而忽略前面的触发。具体实现如下：

function debounce(func, delay) {
  let timer;

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

使用防抖函数可以有效地解决一些频繁触发的问题，比如输入框输入内容时的实时搜索功能。通过设置适当的延迟时间，可以避免在每次输入时都进行搜索，只在用户停止输入一段时间后进行搜索，减少了无用的搜索请求。

节流函数的作用是对于频繁触发的函数，限制其执行频率，例如每隔一定的时间间隔才执行一次。具体实现如下：

function throttle(func, delay) {
  let timer;

  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

节流函数常用于一些高频触发的事件，比如页面的滚动事件。通过限制处理函数的执行频率，可以减少过多的计算和渲染操作，提升页面的性能和流畅度。

综上所述，防抖函数和节流函数都是为了优化频繁触发的函数而存在的。防抖函数通过延迟执行函数，减少了不必要的函数执行次数。节流函数通过限制函数执行的频率，降低了函数的触发次数。这两种函数都能提高页面的性能和用户体验。