回顾防抖和节流

防抖（debounce）

当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。

节流（throttle）

在固定周期内，只执行一次动作，若有新事件触发，不执行，周期结束后，又有事件触发，开始新的周期。即：高频事件触发,但是在n秒内只会执行一次,会稀释函数的执行频率

区别

节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖只是在最后一次事件后才触发一次函数。

使用场景

防抖：当程序只需要处理最后一次触发事件时。

• 在输入框反复输入内容，输入结束后再执行操作；
• 浏览器出口大小变化时，不需要计算中间的变化过程，只需要窗口大小改变完成后的值。

节流： 当事件触发过于频繁，需要限制事件处理程序的调用频率时。

• 滚动加载，如是否滑到底部自动加载更多；
• 鼠标不断点击触发，mousedown(单位时间内只触发一次) ；
• 高频点击提交，表单重复提交。

实现：

防抖

当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作

function debounce(func, delay) {
  let timer = null;
  return function () {
    clearTimeout(timer);  //清除计时器
    timer = setTimeout(() => {  //重新记时
      func.apply(this, arguments);
    }, delay);
  };
}

节流

在固定周期内，只执行一次动作，若有新事件触发，不执行，周期结束后，又有事件触发，开始新的周期

function throttle(func, delay) {
  let flag = true;  //设置判断
  return function () {
    if (!flag) {  //周期内直接返回
      return;  
    }
    flag = false;  //周期开始
    setTimeout(() => {
      func.apply(this, arguments);
      flag = true;  //周期结束，判断允许
    }, delay);
  };
}

细说防抖和节流 

防抖(debounce) 和 节流(throttling)_萌新小吉的博客-CSDN博客_防抖