第二篇 手写原理代码 - 函数【 函数防抖 、函数节流 】

函数防抖和函数节流都是优化高频事件处理的JavaScript技术。它们可以限制函数的调用，在一定程度上减少计算、网络请求和提高响应速度，但它们的实现方式略有不同

函数防抖：延迟执行函数，只有在事件停止后才会执行最后一次事件

函数节流：定期执行函数，每隔一段时间执行一次

通常情况下，函数节流适用于需要保持连续操作（如鼠标移动）而不影响交互的情况，函数防抖通常用于输入框、搜索、登录等场景

1、函数防抖

const debounce = (fn, delay = 500) => {
  let timer;
  return function (...args) {
    timer && clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

2、函数节流

const throttle = (fn, delay = 300) => {
  let flag;
  return function (...args) {
    if (flag) return;
    flag = setTimeout(() => {
      fn.apply(this, args);
      flag = null;
    }, delay);
  };
};