节流防抖原理以及如何实现

防抖函数原理（debounce）

在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。
手写简化版：

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

适用场景：

• 按钮提交场景：防止多次提交按钮，只执行最后提交的一次
• 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词类似功能

节流函数原理（throttle）

规定在一个单位时间内，只能触发一次函数。如果这个单位事件内触发多次函数，只有一次生效。

const throttle = (fn, delay= 500) {
  let flag= true;
  return (...args) => {
    if(!flag) reurn;
    flag= false;
    setTimeout(()=> {
      fn.apply(this, args);
      flag= true;
    }, delay);
  };
};

适用场景

• 拖曳场景：固定时间只执行一次，防止超高频次触发位置变动
• 缩放场景：监控浏览器 resize
• 动画场景：避免短时间内多次触发动画引起性能问题