JS中的节流与防抖运用

作者: tww844475003 分类: 前端开发 发布时间: 2021-05-27 21:36

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

正常调用

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. 滚轮事件, 不断的往下滚轮,比如滚动到底部加载数据

前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注