函数的防抖节流

防抖节流：限制函数执行次数

1. 防抖：通过SetTimeout的方式，在一定的时间间隔内，将多次触发变成一次触发。
2. 节流：减少一段时间的触发频率

防抖：
场景：在用户提交表单时，为了避免用户在短时间内多次点击提交按钮

<input type="text"> <button id="btn">提交</button>

    var btn = document.getElementById("btn");
    btn.addEventListener("click", debounce(submit, 2000, true), false);
    function submit(e) {
      console.log("1");
      console.log(e);
      console.log(this)

    }
    function debounce(fn, timer, triggleNow) {
      var t = null;
      return function () {
		// 如果计时器存在就清除上一次的setTimeout
        if (t) {
          clearTimeout(t);
        }
        // 使用triggleNow区分是否在第一次请求时也要进行延时操作
        if (triggleNow) {

          var firstClick = !t;
          if (firstClick) {
          	// 改变this指向，并且把参数arguments传入
            fn.apply(this, arguments);
          }

          t = setTimeout(() => {
            t = null;
          }, timer);
        } else {
          t = setTimeout(() => {
            fn.apply(this, arguments)
          }, timer);
        }

      }
    }

节流：减少一段时间的触发频率

 var btn = document.getElementById("btn");
    btn.addEventListener("click", throttle(submit, 2000,), false);
    function submit(e) {

      console.log(e);
      console.log(this)

    }
    
    function throttle(fn, delay) {
      var begin = 0;
      return function () {
       // 设置当前时间
        var cur = new Date().getTime();
        // 对比当前时间和开始时间是否大于设定的delay，如果满足要求就执行函数
        if (cur - begin > delay) {
          fn.apply(this, arguments);
          begin = cur;
        }
      }
    }