朝花夕拾-工作小记

Posted 2020-12-09 chyshy

谈谈js防抖和节流

常见的防抖节流应用场景：监听滚动条(onscroll)、输入框的验证(validate)、echarts自适应处理（onresize）
如果事件处理没有频率限制，就会加重浏览器的负担，影响用户的体验感，因此，我们可以采取防抖（debounce）和节流（throttle）来处理，减少调用事件的频率，达到较好的用户体验

防抖

当事件被触发时，设定一个定时器，若期间又被触发，则重新设定周期，直到周期结束
`
//需求:监听浏览器滚动事件，返回当前滚条与顶部的距离
需求实现(未处理版)
function watchScroll() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
console.log(scrollTop)
}
window.onscroll = watchScroll
//如果不做处理,在拖动滚动条时这个函数触发的频率会很高,为了不浪费浏览器性能,这里可以用上防抖函数
/**

• @param fn:需要防抖处理的函数,delay:防抖设置的间隔
• @return function
  */
  function debounce(fn, delay) {
  let timer = null //这里用到了闭包,每次onscroll触发都会调用下一行返回的匿名函数,所以timer=null只会执行一次,并且timer会一直保留到闭包函数销毁为止
  return function () {
  if (timer) {
  clearTimeout(timer)
  timer = setTimeout(fn, delay)
  } else {
  timer = setTimeout(fn, delay)
  }
  }
  }

需求实现(debounce处理版)
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log(‘滚动条位置：‘ + scrollTop);
}
window.onscroll = debounce(showTop,1000)
`

节流

当事件被触发时，在一定时间内只有第一次触发有效，若期间又被触发则无效，直到周期结束