JavaScript中的防抖与节流

防抖（Debounce）和节流（Throttle）是前端开发中常用的优化性能的技术，它们的目的都是为了减少重复操作导致的性能浪费。防抖指的是在一段时间内多次触发同一事件时，只执行最后一次操作，而忽略之前的所有操作。通俗来说，就是你一直按下按钮，但是只有最后一次按下时才会执行操作。防抖的原理是设置一个定时器，当事件被触发时，定时器开始计时，在指定的时间内，如果事件被再次触发，就重置计时器。只有当指定的时间到了，定时器才会执行相应的操作。防抖常用于输入框输入搜索、窗口大小调整等场景，以减少重复操作。节流指的是在一段时间内多次触发同一事件时，只执行一次操作。它的原理是在指定的时间内，只执行一次操作，即使事件被触发多次。例如，当你持续向下滚动网页时，节流技术可以限制每隔一段时间才会执行一次滚动事件，从而减少不必要的滚动事件，提高性能。节流常用于鼠标滚动、页面滚动等场景。综上所述，防抖和节流都是为了减少重复操作导致的性能浪费，但是它们的实现方式略有不同，应根据实际场景来选择使用哪种技术。

下面是使用 JavaScript 实现防抖和节流的示例代码：

防抖示例：

function debounce(fn, delay) { 
  let timer = null;  
  return function(...args) {  
    clearTimeout(timer);  
    timer = setTimeout(() => { 
      fn.apply(this, args);   
    }, delay); 
  }; 
} // 使用示例 
const searchInput = document.querySelector('#search-input');
const searchHandler = debounce(function() {  
  console.log('search:', searchInput.value); 
}, 500); 
searchInput.addEventListener('input', searchHandler);

在上面的示例中，debounce 函数接受一个函数和一个延迟时间作为参数，返回一个新的函数，该函数会在延迟时间内多次调用时只执行最后一次调用。在实际应用中，我们可以将防抖函数应用于用户输入搜索关键词、窗口大小调整等场景。

节流示例：

function throttle(fn, delay) {
  let lastTime = 0;  
  return function(...args) {  
    const currentTime = new Date().getTime(); 
    if (currentTime - lastTime > delay) {    
      fn.apply(this, args);     
      lastTime = currentTime;   
    }  
  };
} 
// 使用示例 
const scrollHandler = throttle(function() { 
  console.log('scroll:', window.scrollY);
}, 200);
window.addEventListener('scroll', scrollHandler);

在上面的示例中，throttle 函数接受一个函数和一个时间间隔作为参数，返回一个新的函数，该函数会在每个时间间隔内只执行一次调用。在实际应用中，我们可以将节流函数应用于用户滚动页面、鼠标移动等场景。

需要注意的是，防抖和节流的实现方式可能有所不同，上面的示例代码仅供参考，具体实现应根据实际场景和需求进行调整和优化。