JS防抖和节流

防抖又叫为函数防抖（debounce）

JS中的防抖（Debounce）是指在事件触发后等待一段时间再执行相应的操作。如果在这段时间内再次触发了同样的事件，则会重新计算等待时间。
前端开发中，常见的事件如，onresize，scroll，mousemove ,mousehover 。

以下是一个使用JavaScript编写的防抖函数示例：

function debounce(func, delay) {
    let timer; // 定义一个变量来保存定时器ID
    
    return function() {
        clearTimeout(timer); // 清除之前设置的定时器
        
        timer = setTimeout(() => {
            func.apply(this, arguments); // 调用传入的函数并将参数传递进去
        }, delay);
    };
}

上面的代码定义了一个名为debounce的高阶函数，接收两个参数：要执行的函数 func 和延迟时间 delay。当该函数被调用时，首先会清除之前设置的定时器，然后创建一个新的定时器，经过延迟时间后才真正执行传入的函数。

可以通过以下方式使用防抖函数：

// 需要防抖处理的函数
function handleScroll() {
    console.log("滚动事件");
}
 
// 获取元素
const element = document.getElementById('myElement');
 
// 添加滚动事件监听器，并使用防抖函数包装
element.addEventListener('scroll', debounce(handleScroll, 200));

上述代码中，我们通过addEventListener方法向元素添加了一个滚动事件监听器，并且使用了防抖函数对其进行了包装。每当滚动事件触发时，都会根据设置的延迟时间来判断是否执行handleScroll函数。
 

节流又叫函数节流（throttle）
JavaScript节流是指在一定时间内限制函数执行的次数，以避免过度计算和渲染。这种技术特别适用于那些需要快速响应用户输入或屏幕变化的情况，如用户输入响应、滚动事件处理和窗口尺寸调整。节流的核心思想是通过使用定时器来控制函数的执行频率，确保只有在前一个事件的处理完成后才会执行下一个事件的处理器。这样可以在不影响用户体验的前提下，提高网页性能和效率。

代码实现
假设有一个需求做一个幸运抽奖数字生成器，我们只想在特定时间后获得一个数字。通过节流，我们可以实现这一点。

const throttle = (func, limit) => {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args)
          lastRan = Date.now()
        }
      }, limit - (Date.now() - lastRan));
    }
  }
}

btn.addEventListener('click', throttle(function() {
  return console.log('HOLA! oppo', new Date().toUTCString());
}, 1000));

这将只在给定的时间间隔后调用/执行指定的函数，无论调用多少次。

防抖和节流的区别
函数防抖：是X秒内只执行一次，如果触发事件后在 X 秒内又触发了事件，则会重新计算函数延执行时间。
函数节流：是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。