防抖和节流

最新推荐文章于 2024-09-21 16:58:31 发布

哈哈1133哈哈

最新推荐文章于 2024-09-21 16:58:31 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/weixin_43675173/article/details/103235038

版权

函数防抖和节流，都是控制事件触发频率的方法。应用场景有很多，输入框持续输入，将输入内容远程校验、多次触发点击事件、onScroll等等。

防抖函数

函数防抖，这里的抖动就是执行的意思，而一般的抖动都是持续的，多次的。假设函数持续多次执行，我们希望让它冷静下来再执行。也就是当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行。
分解一下需求：

持续触发不执行
不触发的一段时间之后再执行

    <script>
        $(function(){
            $("#ipt").on('keyup',debounce(function(){
                console.log( $("#ipt").val())
            },500))
            
            function debounce(fn){
                console.log(fn)
                let timeout=null;
                return function(){
                    clearTimeout(timeout)
                    timeout=setTimeout(()=>{
                        fn.apply(this,arguments)
                    },1000)
                }
            }
        })
      
      
    </script>
</head>
<body>
    <input id="ipt" type="text" placeholder="请输入···">
    
</body>

节流函数

节流的意思是让函数有节制地执行，而不是毫无节制的触发一次就执行一次。什么叫有节制呢？就是在一段时间内，只执行一次。分解一下需求：

持续触发并不会执行多次

到一定时间再去执行

<script>
    $(function () {
      $("#ipt").on('keyup', throttle(function () {
        console.log($("#ipt").val())
      }, 1000))

      function throttle(fn, delay) {
          console.log(fn,delay)
        var prev = Date.now();
        return function () {
          var args = arguments;
          var now = Date.now();
          if (now - prev >= delay) {
            fn.apply(this, args);
            prev = Date.now();
          }
        }
      }
    })

  </script>
<body>
  <input id="ipt" type="text" placeholder="请输入···">

</body>