函数防抖和函数节流的简单介绍

函数防抖

主要使用场景是输入框输入后才发送请求

// 未封装写法
   var t = null;
    window.onscroll = function () {
      clearTimeout(t);
      t = setTimeout(function () {
        console.log("调用一次");
      }, 500);
    };

// 封装写法好处，既可以定义时间，也可以避免t变量的全局污染
    function debounce(callback, delay = 300) {
      console.log(23);
      var t = null;
      return function () {
        clearTimeout(t);
        t = setTimeout(callback, delay);
      };
    }
    window.onscroll = debounce(function () {
      console.log("调用一次");
    }, 500);

函数节流

应用场景：1、提交表单 2、高频监听事件

//delay = 300是定义时给的默认值
    function throttle(callback, delay = 300) {
      // 获取第一次的时间
      FirstTime = new Date().getTime();
      return function () {
        // 获取当前时间
        CurrentTime = new Date().getTime();
        if (CurrentTime - FirstTime > delay) {
          FirstTime = CurrentTime;
          callback();
        }
      };
    }

    window.onscroll = throttle(function () {
      console.log("触发一次");
    }, 1000);

函数防抖是一个一定时间内，虽然触发多次，但是一定时间之后的最后一次才会生效（将多次操作变成一次），

函数节流是一个一定时间内只能触发一次，其它时候不能触发（一定时间内只调用一次函数）

总结：函数防抖是一直删除上一个，而函数节流是一直不执行下一个