防抖和节流（运用闭包）

一名前端臭弟弟的学习新得！ (´๑•_•๑)

防抖：指触发事件后在n秒内函数只执行一次，计时重新计算。

function fn() {
                console.log('测试')
        }
        function fd(func,wait){
            var timeout;
            return function(){
                if(timeout){
                    clearTimeout(timeout);
                }
                let callnow=!timeout;
                timeout=setTimeout(()=>{
                    timeout=null;
                },wait)
                if(callnow){
                    func.call()
                }else{
                    console.log(wait/1000+'秒内不能多次点击')
                }
            }
        }
        var clk=document.getElementById('btn');
        clk.onclick=fd(fn,5000)

节流：在一定时间内只会执行一次

        function fn() {
                console.log('测试')
        }
        function fd(func,wait){
            var pre=0;
            return function(){
                let now=new Date();
                if(now-pre>wait){
                    func.call();
                    pre=now;
                }else{
                    console.log('还没到'+wait/1000+'秒')
                }
            }
        }
        var clk=document.getElementById('btn');
        clk.onclick=fd(fn,5000)

小Demo 手机发送验证码

  <input type="text" name="num" autocomplete="on">
  <div id="send">
    发送验证
  </div>
  <script>
    function fn() {
      console.log('测试')
      let c = document.getElementById('send');
      var time = 10;
      var zzc = setInterval(() => {
        time--;
        if (time == 0) {
          clearInterval(zzc)
          c.innerHTML = '发送验证'
        } else {
          c.innerHTML = '已发送' + time;
        }
      }, 1000)
    }
    function fd(func, wait) {
      var pre = 0;
      return function () {
        let now = new Date();
        if (now - pre > wait) {
          func.call();
          pre = now;
        } else {
          console.log('还没到' + wait / 1000 + '秒')
        }
      }
    }
    var c = document.getElementById('send');
    c.onclick = fd(fn, 10000)
  </script>

总结：运用闭包储存一个状态值 判断是否执行想要执行的函数。个人理解闭包：首先js会有2种类型的数值 一种是基本类型 键和值保存在栈中 使用时直接使用。还有一种类型是引用类型 他的键是保存在栈中 数值保存在堆内存中 通过地址指向内存中的堆数据，闭包通过返回一个匿名函数 就是引用类型的数据 在堆内存中，如果不清除掉他就会一直存在 也就有了内存泄漏这个问题，而返回的匿名函数有引用了外层的数据 导致外层的数据也一直存在 尽管外层的数据是基本类型（基本类型使用过，没有人在使用了 就会被回收）这里也涉及到作用域链的知识点 当引用某个变量 会在自身所在的作用域查找 没有的话就会向上查找