前端优化之节流和去抖（从代码层真正明白了节流和去抖）

说到前端优化，如果你不知道节流和去抖 那可能真不能说你了解前端优化，但是会节流和去抖，并不能代表你前端优化你很了解，因为前端优化包括方方面面啊。。。

接下来说说节流和去抖

节流
 

  <input type="text" id="ipt">
  <!-- 开源节流 -->
  <script>
    // 现实中节流 : 减少流通，节省开支 ;
    // 程序中节流 : 减少程序的运行次数; 

     节流：在固定间隔事件之内只能执行一次;   
    // 定义一个变量 用于判断状态
    var t = null;
    document.getElementById("ipt").oninput = function () {      
      // 这时候有程序在100毫秒之内执行过,不需要再次执行了;
      if (t !== null) {
        return false;
      }
      t = setTimeout(function () {
        // 此处省略其它处理代码
        // 程序500毫秒时间间隔已过，可以继续执行程序了。
        // 我们改变t的状态就可以了。
        t = null;
      }, 500)
    }

    // 什么叫做函数节流 :
    // 1. 是在高频词执行的函数之中 比如：oninput keydown onscroll mousemove;
    // 2. 在函数执行的时候开启一个定时器，记录程序的执行状态;
    // 3. 如果程序执行，判断上一个定时器是否执行完成，如果执行完成那么我们可以重新执行程序，如果没有完成，就跳出程序;

  </script>

去抖

 <input type="text" id="ipt">
  <script>
  
    去抖：让函数在停止触发事件后的一段时间再执行;
    或者如果函数重复执行，那么就清空计时重新记录
    
    var count = 0;
    var t = null;
    document.getElementById("ipt").oninput = function () {
      // 每次都先清空之前的定时器 再执行下面代码
      clearInterval(t);
      // 当500毫秒之后再执行下面代码
      t = setTimeout(function () {
        console.log("执行");
      }, 500)
    }

    // 函数去抖是一种心态，修行;
    // 注意：去抖会让用户感觉程序会有一丝停顿，所以节流和去抖还是的合理使用
    // 去抖使用：瀑布流