防抖与节流的作用及运用场景

防抖与节流的作用?

防抖和节流都是为了减少函数被频繁调用，从而提高性能。

防抖与节流的用途?

假设你正在为一个搜索框编写代码。当用户输入字符时，JS 代码就会被调用，以便实时响应用户输入并展示搜索结果。但是，如果用户输入非常快，比如一秒钟能够输入几十个字符，那么这个 JS 代码会被频繁地调用，导致页面变得很卡。为了解决这个问题，我们可以使用防抖或节流技术来限制函数的调用次数。

防抖：等待一段时间，比如500毫秒，如果在这段时间内用户的输入没有发生变化，那么就执行这个函数一次。如果用户输入产生了新的变化，就再等待500毫秒。这样做的好处是，可以避免函数被频繁调用，只在用户输入有所改变时才调用函数。

节流：限制函数的调用频率，比如一秒钟只调用一次函数。如果在一秒钟内用户输入多次，也只调用一次函数。这样做的好处是，可以控制函数的调用次数，避免出现过多的计算或者渲染，提高页面的性能。

防抖 (Debounce)：

指触发事件后在一个固定时间内没有再次触发该事件，才会执行该事件。

防抖的运用场景:

按钮点击事件，防止重复提交
搜索框输入事件，避免频繁请求后台接口
窗口大小改变事件，避免频繁触发重渲染
Scroll 滚动事件，避免频繁触发后台数据请求

实现防抖的方法:

实现防抖的方法是在函数触发时，使用一个定时器，用于延迟执行函数。如果在延迟时间内再次触发了该函数，就清除之前的定时器，重新开始计时。

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

节流 (Throttle)：

指连续触发事件，但是在 n 秒内只执行一次函数。

节流的运用场景:

抢购活动，避免重复点击购买按钮
鼠标移动事件，避免频繁调用动画状态
窗口滚动事件，避免频繁执行 DOM 操作
监听 DOM 元素大小，避免频繁触发其他操作

实现节流的方法:

实现节流的方法是在函数执行时刻，判断当前时间与上一次执行函数的时间间隔是否超过设定时间 n，如果超过，则执行该函数，并更新上一次执行时间。

function throttle(fn, wait) {
  let lastTime = 0;
  return function() {
    const currentTime = Date.now();
    if (currentTime - lastTime > wait) {
      lastTime = currentTime;
      fn.apply(this, arguments);
    }
  };
}