[JavaScript知识库]js节流和防抖实现以及区别

节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率，像滚动监听这样的高频触发，就可以用节流的方式优化，思路就是每次触发事件时都判断当前是否有等待执行的延时函数。

function throttle(fn) {
      let flag= true; 
      return function () {
        if (!flag) return; 
        flag= false; 
        setTimeout(() => { 
          fn.apply(this, arguments);
          flag= true;
        }, 1000);
      };
    }
    function log(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(log));

防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间，比较经典的就是input框监听输入，如果用户持续输入则不请求内容，当用户输入停留超过1s钟则开始处理输入内容。

function debounce(fn) {
      let timeout = null; 
      return function () {
        clearTimeout(timeout); 
        timeout = setTimeout(() => { 
          fn.apply(this, arguments);
        }, 1000);
      };
    }
    function log() {
      console.log('发送请求');
    }

    var inputDom = document.getElementById('input');
    inp.addEventListener('inputDom', debounce(log));