防抖和节流的原理及原生代码

防抖和节流是两种常用的优化技术，用于控制事件的触发频率。

1. 防抖（Debounce）的原理是，在事件触发后等待一段时间，如果在等待时间内再次触发了该事件，则重新计时等待。只有在等待时间结束后，才会执行事件处理函数。这可以避免事件处理函数被频繁触发，只在事件停止触发一段时间后才执行。

2. 节流（Throttle）的原理是，在一定的时间间隔内只执行一次事件处理函数。当事件触发后，会立即执行事件处理函数，并在设定的时间间隔内禁止再次触发事件处理函数。这可以限制事件处理函数的执行频率，避免过于频繁的执行。

下面是用原生 JavaScript 实现节流函数和防抖函数的核心代码，并附带详细的注释说明：

// 节流函数
function throttle(fn, delay) {
  let timer = null; // 定义一个定时器变量

  return function() {
    if (!timer) { // 如果定时器不存在，表示可以执行事件处理函数
      timer = setTimeout(() => {
        fn.apply(this, arguments); // 执行事件处理函数
        timer = null; // 执行完毕后清空定时器，表示可以再次执行事件处理函数
      }, delay);
    }
  };
}

// 防抖函数
function debounce(fn, delay) {
  let timer = null; // 定义一个定时器变量

  return function() {
    clearTimeout(timer); // 清空定时器，重新计时
    timer = setTimeout(() => {
      fn.apply(this, arguments); // 执行事件处理函数
    }, delay);
  };
}

使用示例：

function handleResize() {
  console.log('Window resized');
}

const throttledResize = throttle(handleResize, 200); // 创建节流函数
const debouncedResize = debounce(handleResize, 200); // 创建防抖函数

window.addEventListener('resize', throttledResize); // 绑定节流函数到 resize 事件
window.addEventListener('scroll', debouncedResize); // 绑定防抖函数到 scroll 事件

通过使用这两个函数，可以限制事件处理函数的执行频率，提高页面的性能和响应速度。在实际应用中，可以根据具体需求来选择使用节流函数还是防抖函数。