个人头像

柠檬酸

2月前来过

控制台
欢迎来到我的博客!
默认封面

00:00/

播放列表

函数防抖和节流

发布于2018-04-26 / 318次浏览

网上对函数节流和函数防抖的定义都各不相同。经常把节流说成防抖,把防抖说成节流。主要的原因是红皮书上的案例把市面上的函数防抖定义成了函数节流导致两者定义模糊不清。
这里也不讨论对错,我以网上博客的定义为准。
他们的作用:都是在X毫秒内把多个事件合并成一个

函数防抖

在x毫秒内把多个事件合并成一个,只执行最后一次
应用场景:验证用户输入,监听oninput或者onchange事件,ajax搜索栏(百度好像不是这么做的 orz…)

代码:

function debounce(fn,delay){
  var timeoutId=null;
  return function(){
    clearTimeout(timeoutId)
    timeoutId = setTimeout(function(){
      fn()
    },delay||500)
  }
}

效果是:如果滚动间隔小于500ms,不管怎么拖动滚动条,函数都会在你停止拖动500毫秒后执行函数fn

函数节流

在X毫秒内把多个事件合并成一个并且至少执行一次(执行第一次)
应用场景:图片懒加载,下拉请求ajax等。
代码:

function throttle(fn,delay){
  var isReady=true
  return function(){
    if(isReady){
      isReady=false
      setTimeout(function(){
        fn()
        isReady=true
      },delay || 500)
    }
  }
}

效果是:如果滚动间隔小于500ms,疯狂拖动滚动条,函数还是会以500毫秒一次的速度执行函数fn

喜欢 1
TAGS:  
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。 转载请注明出处链接 : 函数防抖和节流

1 条评论

  1. 葛一速 说道: 来自 Firefox 52.0 in Windows XP
    2018-05-22 17:49

    很实用的代码