美文网首页
函数防抖和节流

函数防抖和节流

作者: _嗯_哼_ | 来源:发表于2018-10-19 16:27 被阅读0次

    前言:函数防抖和函数节流都是用于优化高频率执行js的一种手段

    节流

    函数节流:是指一定时间内js方法只跑一次
    应用场景:如resize,scroll在改变窗口和滚动的时候

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        .wrap {
          width: 200px;
          height: 200px;
          border: 1px solid red;
          overflow-y: scroll;
          margin-top: 50px;
        }
    
        .scroll {
          height: 500px;
        }
      </style>
    </head>
    
    <body>
      <div class="wrap" id="throttle">
        <div class="scroll">函数节流</div>
      </div>
    </body>
    
    </html>
    <script>
      let isPass = true;
      let throttle = document.getElementById('throttle')
      throttle.onscroll = () => {
        if (!isPass) {
          return;
        }
        isPass = false;
        setTimeout(() => {
          // 这里执行函数
          console.log("函数节流")
          isPass = true
        }, 300);
      }
    </script>
    

    ps:需要注意的是执行的间隔时间是>=300ms。如果具体执行的方法是包含callback的,也可以将isPass=true这一步放到callback中。


    防抖

    函数防抖:是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次(点击后一次动作时候会将前一次的给清空掉)
    应用场景:如resize,scroll在改变窗口和滚动的时候

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        .wrap {
          width: 200px;
          height: 200px;
          border: 1px solid red;
          overflow-y: scroll;
          margin-top: 50px;
        }
    
        .scroll {
          height: 500px;
        }
      </style>
    </head>
    
    <body>
      <div class="wrap" id="debounce">
        <div class="scroll">函数防抖</div>
      </div>
    </body>
    
    </html>
    <script>
      let timer = null;
      let debounce = document.getElementById('debounce')
      debounce.onscroll = () => {
        // 清除未执行的代码,重新执行动作
        clearTimeout(timer);
        timer = setTimeout(() => {
          //这里执行函数
          console.log('函数防抖')
        }, 300);
      }
    </script>
    

    相关文章

      网友评论

          本文标题:函数防抖和节流

          本文链接:https://www.haomeiwen.com/subject/zpsyzftx.html