7.防抖节流函数代码详解

防抖：一个通俗的说法，防抖就是英雄联盟里的回城，不停按回城是触发不了回城跳转的，他只管你按得最后一次。

节流：节流就是英雄的技能，你不停按，只有技能CD好了才能生效。

现在我们来详细的讲解防抖和节流

简单，易理解的防抖详细讲解

  <script>
    let ipt = document.querySelector('input')
    let t = null
    // 当你抬起键盘的时候，t有值了，这个时候定时器内的执行函数被清除，被清除了之后t不就等于空了吗，
    // t = null了，那么就执行setTimeout，那么一秒之后就打印值 
    // 键盘抬起的时候，t不为空，直接清除t，此时t为空，执行下面的setTimeout。
    ipt.addEventListener('keyup',() => {
      if(t !== null){
        clearTimeout(t)
      }
       t =  setTimeout(() => {
        console.log(ipt.value);
      },1000)
      console.log(t);
    })
    console.log(t);
  </script>

节流详解

  <script>
    // 这个节流函数 关键的点其实 是在于函数的执行顺序
    // 我们分析一下
    // 定义一个flag为true，当页面滚动的时候，如果flag为 true 执行 setTimeout
    // 接下里执行的并不是console.log('hello');，而是 flag = false，
    // 当flag为false，那么setTimeout不再执行，此时我们需要让flag为 true，这个时候setTimeout可以执行了
    // 但是，他有0.5s的延迟，也就是说，在这0.5s之中，无论你怎么操作，他都不会执行
    // 等执行完flag = false之后，再执行console.log('hello');flag = true
    let flag = true
    window.onscroll = () => {
       if(flag){
         setTimeout(() => {
           console.log('hello');
           flag = true
         },1000)
       }
       flag = false
       console.log(1);
    }
  </script>

节流函数的封装

    window.onscroll = closeFlows(function() {
      console.log(111);
    },500)


     function closeFlows(fn,delay) {
       let flag = true
       return function(){
         if(flag){
           setTimeout(() => {
             fn()
             flag = true
           },delay);
         }
         flag = false
       }
     }