防抖和节流

一：防抖

防抖的主要思想是，当一个事件被触发后，延迟一段时间后再执行相应的操作，如果在这段时间内事件再次触发，就会取消之前的操作，并重新计时
防抖会等待一定的时间（称为防抖延迟），只有在该时间内没有新事件触发时才执行相应的操作。如果在延迟期间事件不断触发，计时会被重新开始，操作不会被执行。

应用场景

防抖通常用于以下情况：
- 处理用户输入，例如搜索框输入，可以等待用户停止输入一段时间后再进行搜索请求，以减少请求次数。
- 处理窗口大小调整事件，以避免在用户调整窗口大小时频繁触发事件。
- 处理按钮点击，以避免用户连续多次点击按钮造成意外的操作。

JS实现

//防抖
function debounce (fn, delay)
{
  //设置一个定时器
  let timer = 0
  //返回一个函数
  return function (...arguments)
  {

    if (timer) {
      //清除上一个定时器
      clearTimeout(timer)
    }
    //开启下一个定时器
    timer = setTimeout(() =>
    {
      //透传 this 和 参数
      fn.apply(this, arguments)
    }, delay);
  }
}

该函数有两个参数，fn待传入的原始函数即需要添加防抖的函数，delay设置的延迟时间
如果在延迟时间内有新事件触发，就会清除之前的定时器并重新设置新的定时器，以此来达到控制事件触发频率的效果
fn.apply(this, arguments);：当新的定时器触发时，会执行传递给 debounce 函数的原始函数 fn，并将之前捕获的参数 arguments 传递给它。apply 方法用于在指定的上下文（this）中执行函数，并传递一个参数数组。

二：节流

节流的主要思想是，在一段时间内，无论事件触发多少次，只执行一次相应的操作，然后再等待下一个时间段。
具体来说，节流会设置一个时间间隔，在这个时间间隔内，只有第一次触发事件会执行操作，之后的触发事件会被忽略，直到时间间隔过去，然后才会重新接受新的事件。

应用场景

控制滚动事件的触发频率，以提高性能，例如在实现无限滚动加载更多内容时。
控制鼠标移动事件的触发频率，以减少事件处理的负担。
防止用户在短时间内多次提交表单或点击按钮。

JS实现

时间戳结合定时器实现

function throttle (func, delay)
{
  //定义上次执行的结束时间
  let lastExecTime = 0;
  //定时器标识
  let timeoutId;

  //返回函数 执行逻辑
  return function (...args)
  {
    //定义当前时间
    const currentTime = Date.now();
    //判断间隔时间是否小于delay延迟时间
    if (currentTime - lastExecTime < delay) {
      if (timeoutId) {
        //清除上次的定时器
        clearTimeout(timeoutId);
      }
      //开启定时器
      timeoutId = setTimeout(() =>
      {
        //更新结束时间
        lastExecTime = currentTime;
        func.apply(this, args);
      }, delay);
    } else {
      //间隔时间大于延迟时间 可直接执行函数
      lastExecTime = currentTime;
      func.apply(this, args);
    }
  };
}

利用时间戳和定时器来实现一个更精准的节流函数
通过把控间隔时间和设置的延时时间，来判断，下次执行事件是否过了设置的延迟时间
- 若是还没过延迟时间，开启定时器，直到延迟时间过去再执行
- 若间隔时间大于延迟时间，直接执行事件

防抖和节流

一： 防抖

应用场景

JS实现

二：节流

应用场景

JS实现

一：防抖