一句话总结防抖和节流的区别？_用一句话概括防抖-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_49438920/article/details/125275603

防抖和节流的区别？

防抖：
效果：输入框

<body>
    <input type="text">
    <script>
        fn = function (e) {
           console.log(this.value)
           console.log(e)
        }
        var inp = document.querySelector('input')
        var debounce = function (fn, delay) {
            var timer = null
            return function (e) {
                if(timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    fn.apply(this,arguments)
                }, delay);

            }
        }
        inp.oninput = debounce(fn, 1000)
    </script>
</body>

节流：
效果：拖动一个div块

<body>
    <div class="block" draggable="true"></div>
    <script>
      var block = document.querySelector('.block')
      var fn = function() {
        console.log(55)
      }
      var throttle = function(fn,delay) {
        var timer = null
        return function() {
            if(timer) {
                return
            }
           timer =  setTimeout(() => {
                fn()
                timer = null
            }, delay);
        }
      }
      block.addEventListener('drag',throttle(fn,200) )
    </script>
</body>

区别：

防抖是执行用户最后一次行为动作，若在delay时间内再次触发则重新计时，直到某一个定时器能计时结束并执行回调
区别代码：
delay时间内重复触发则清除定时器

        if(timer) {
              clearTimeout(timer)
          }

节流目的是减少执行频率，在delay延时内只执行一次，若delay时间内重复触发则直接return，并且执行完回调后将定时器清空，方便下次调用定时器。
区别代码：

        if(timer) {
             return
         }