前端的防抖和节流

GeorgeZrx

已于 2023-02-01 20:25:10 修改

阅读量192

点赞数

文章标签： javascript

于 2023-02-01 13:25:04 首次发布

本文链接：https://blog.csdn.net/GeorgeZrx/article/details/128832024

版权

（一）区别防抖与节流

当事件高频触发时，防抖只执行最后一次而节流是在一个规定的单元条件内执行一次。

（二）二者的常见应用场景

防抖：输入联想功能、防重点击...

节流：预加载滚动事件、窗口调整事件、元素拖拽事件...

（三）实现

防抖：

function debounce(callback, delay) {
    return function(event) {
        if (callback.timer) {
            clearTimeout(callback.timer)
        }
        callback.timer = setTimeout(() => {
            callback.call(event.target, event)
            callback.timer = null
        }, delay)
    }
}

节流：

function throttle (callback, delay) { 
    let start = 0
    return function (event) { 
        const current = Date.now()
        if (current-start > delay) {
            callback.call(event.target, event)
            start = current 
        }
    } 
}

（四）实操

利用地一个div的大小变化来呈现防抖和节流的效果

<body>
    <button id="btnDe" style="cursor: pointer;">防抖</button>
    <button id="btnTh" style="cursor: pointer;">节流</button>
    <div id="display" class="display" style="width: 50px; height: 50px" />
    <script>
      var display = document.getElementById('display');
      var btnDe = document.getElementById('btnDe');
      var btnTh = document.getElementById('btnTh');
      // 执行函数，使div大一圈
      function fn() {
        display.style.width  = `${Number(display.style.width.split('px')[0]) + 50}px`;
        display.style.height = `${Number(display.style.height.split('px')[0]) + 50}px`;
      }
      // 防抖
      function debounce(fn, delay) {
        var timer;
        return function() {
          clearTimeout(timer);
          timer = setTimeout(() => {
            fn.call(this)
          }, delay)
        }
      }
      var deFn = debounce(fn, 500);
      btnDe.addEventListener('click', deFn);
      // 节流
      function throttled(fn, delay) {
        var start = 0;
        return function() {
          var currentTime = Date.now();
          if (currentTime - start > delay) {
            fn.call(this);
            start = currentTime;
          }
        }
      }
      var thFn = throttled(fn, 1000);
      btnTh.addEventListener('click', thFn);
    </script>
</body>