节流、防抖

节流：

让事件函数隔一段时间触发一次。（应用场景：比如onscroll等高频率触发的事件中）

  // 函数节流
  var canRun = true;
  var timer = null;
  document.onscroll = function () {
    if (!canRun) return; // 判断是否已空闲，如果在执行中，则直接return
    canRun = false;
    timer = setTimeout(function () {
      console.log("函数节流");
      canRun = true;
      clearTimeout(tiemr);
    }, 300);
  };

    //函数节流的封装使用 
    function throttling(fn, interval) {
      let canRun = true;
      let timer = null;
      return function () {
        let self = this,
        args = arguments;
        if (!canRun) return;
        canRun = false;
        timer = setTimeout(function () {
          canRun = true;
          fn.apply(self, args);
          clearTimeout(timer);
        }, interval);
      };
    };
    document.onscroll = throttling(() => {
      console.log("函数节流");
    }, 300);

防抖：

只执行最一次触发的函数。在一定时间内重复触发，之前的函数不被执行，只执行最后一次触发的函数。（应用场景：比如在输入账号密码的时候，不需要每输入一个字符就验证一下是否正确，当全部输入完成之后，再去匹配验证）

// 函数防抖
var timer = false;
document.onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
};  

//防抖函数的封装使用   
function debounce(fn,delay) {
    let timer = null;
    return function () {
        let self = this,
            args = arguments;
        timer && clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(self,args);
        },delay);
    }
}

window.onscroll = debounce(function () {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
},200)