性能优化 =》 节流，只说节流

使用节流能优化性能的原因： 避免了高频率的执行一些没有必要的操作，如你在你点击提交表单按钮的时候需要做节流操作，阻止恶意用户挑战你的脾气！

什么是节流

简单点，说话的方式简单点，就是：在一段时间内只执行一次操作，当然超过了你指定的时间后还是可以执行的

上代码

方法1：

	<div class="throttle-box">节流</div>
    <script>
      // 在一段时间内执行fn函数
      function throttle(fn,wait){
        //定义为0，因为第一次肯定是要执行的【今天面试的时候就写错了，-_-||】
        var pre = 0;
        return function(){
        // 保存调用返回函数的this，方便后边时候指定this调用
          var context = this;
          var now = +new Date();
          // 如果超过或等于wait时间就执行fn
          if(now - pre>= wait){
            fn.apply(context,arguments);
            // 改变pre的时间戳
            pre = now;
          }
        }
    }

    var i = 0; 
    function fn(){
      document.querySelector('.throttle-box').innerHTML='鼠标移动fn执行了  '+  (++i) + '次';
    }

	// 对比
    // 没有节流的
    // window.onmousemove = fn;
    // 节流的
    window.onmousemove = throttle(fn,2000);
    
    </script>

方法二： 定时器【注意清空了定时器，并不意味和定时器的返回值就为null，不信你就自己去查查，或者打印一下清空了定时器后的返回值是不是为假】

 <div class="throttle-box">节流</div>
    <script>
    function throttle(fn,wait){
      // 默认定时器不存在
      var timer = null;
      return function(){
        // 保存指定的this值，方便后边调用fn，保证this不丢失
        var context = this;
        if(!timer){
          // 如果timer为假才执行fn，反之不执行
          timer = setTimeout(()=>{
            // 指定调用fn并传递传过来的参数
            fn.call(context,...arguments)
            // 销毁定时器
            clearTimeout(timer)
            // 注意虽然销毁了定时器，但是timer并不为null，所以需要手动置位null
            timer = null
          },wait)
        }
      }
    }

    var i = 0; 
    function fn(){  
      document.querySelector('.throttle-box').innerHTML='鼠标移动fn执行了  '+  (++i) + '次';
    }

    window.onmousemove = throttle(fn,1000);

    // window.onmousemove = fn;
    
    </script>