JS中的节流与防抖运用

节流函数和防抖函数在日常的开发中还是有很多地方用到，两个函数的目的都是为了控制函数被调用的频率

正常调用

function inputChange(val) {
  console.log('change：', val);
}

let inputEl = document.getElementById('input');
inputEl.addEventListener('keyup', function(e) {
  inputChange(e.target.value)
})

防抖函数

function inputChange(val) {
  console.log('change：', val);
}
function debounce(fn, delay) {
  let timeout;
  
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay)
  }
}

let inputEl = document.getElementById('input');
let debounceInput = debounce(inputChange, 500);
inputEl.addEventListener('keyup', function(e) {
  debounceInput(e.target.value)
})

节流函数

function inputChange(val) {
  console.log('change：', val);
}
function throttle(fn, delay) {
  let timer;

  return function() {
    if (!timer) {
      fn.apply(this, arguments);
      timer = setTimeout(() => {
        clearTimeout(timer);
        timer = null;
      }, delay);
    }
  }
}

let inputEl = document.getElementById('input');
let throttleInput = throttle(inputChange, 500);
inputEl.addEventListener('keyup', function(e) {
  throttleInput(e.target.value)
})

总结

• 防抖函数和节流函数都是用于控制函数调用频率，但是两者实现原理不同
• 防抖函数是在触发事件的单位时间后执行一次函数，在单位时间内多次触发不执行函数，重新计时
• 节流函数是单位时间内只执行一次函数，多次触发也只有一次有效

适用场景

防抖

1. 搜索输入框搜索内容，用户在不断的输入的时候，用防抖来节约请求资源
2. 不断的触发window的resize事件，不断的改变窗口大小，利用防抖函数来只执行一次

节流

1. 鼠标不断的点击，用节流来限制只在规定的单位时间内执行一次函数
2. 滚轮事件, 不断的往下滚轮，比如滚动到底部加载数据