节流和防抖

为何而来

为性能优化而来，避免某些事件的频繁触发

节流

事件按照给定的固定频率触发，减少了触发频率那必然节流，比如输入框的联想输入功能、window.scroll事件

    function throttle(fn, delay) {
      let flag = true, // 加锁
          timer = null;
      return function (...args) {
        let context = this;
        if(!flag)return; // 如果还在固定频率内，不进行任何操作直接返回
        flag = false;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
            flag = true;
        }, delay)
      }
    }

防抖

只执行最后一次触发事件，一步到位从开始状态直接更改为最终结果，没有了中间一点一点变化（抖动）的过程， 这就叫防抖，比如window.resize事件，当resize事件结束时，再去改变页面的显示效果

    function debounce(fn, delay) {
      let timer = null;
      return function(...args) {
        let context = this;
        if(timer)clearTimeout(timer); // 清除上一次的延迟器，取消事件触发
        timer = setTimeout(function() {
          fn.apply(context, args);
        },delay)
      }
    }

防抖也可用于获取验证码按钮，登录按钮的事件，将delay设置为60s,点击按钮后60S内再次点击无效，这样就不用单独为维护一个状态去控制。