JS中的性能优化——防抖、节流简解

防抖（debounce）和节流（throttle）是性能优化的常用手段，用以控制函数执行的频率，以减少计算资源的使用。

防抖：指的是当持续触发事件时，只在停止触发一段时间后，才执行函数。

节流：指的是在一定时间内只执行一次函数。

以下是防抖和节流的简单实现：

防抖：

function debounce(fn, wait) {
  let timeout = null;
  return function() {
    let context = this;
    let args = arguments;
    if (timeout) clearTimeout(timeout);
    let callNow = !timeout;
    timeout = setTimeout(() => {
      timeout = null;
    }, wait);
    if (callNow) fn.apply(context, args);
  };
}
 
// 使用
let myFunc = debounce(function() {
  console.log('防抖函数执行');
}, 200);
window.addEventListener('resize', myFunc);

节流：

function throttle(fn, wait) {
  let previous = 0;
  return function() {
    let context = this;
    let args = arguments;
    let now = new Date();
    if (now - previous > wait) {
      fn.apply(context, args);
      previous = now;
    }
  };
}
 
// 使用
let myFunc = throttle(function() {
  console.log('节流函数执行');
}, 200);
window.addEventListener('resize', myFunc);

防抖和节流可以帮助我们管理事件触发的频率，从而减少不必要的计算或者资源消耗。在实际开发中，根据需要选择适合的方案。