函数节流(throttle)与函数去抖(debounce)记录

1.函数节流:
如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。
  也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。

#throttle使用场景
      第一次触发后先执行fn(当然可以通过{leading: false}来取消),然后wait ms后再次执行,在单位wait毫秒内的所有重复触发都被抛弃。即如果有连续不断的触发,每wait ms执行fn一次。与debounce相同的用例,但是你想保证在一定间隔必须执行的回调函数。例如:
    对用户输入的验证,不想停止输入再进行验证,而是每n秒进行验证;
    对于鼠标滚动、window.resize进行节流控制。

简单实现:

var throttle = function(delay, action){
  var last = 0;
   return function(){
    var curr = +new Date()
    if (curr - last > delay){
      action.apply(this, arguments)
      last = curr 
    }
  }
}

完整实现:

export default (fn, delay = 100) => {
    let now, lastExec, timer, context, args
    function execute() {
      fn.apply(context, args)
      lastExec = now
    }
    
    return function() {
      context = this
      args = arguments
  
      now = + new Date()
  
      if (timer) {
        clearTimeout(timer)
        timer = null
      }
  
      if (!lastExec) {
        execute()
      } else {
        var diff = delay - (now - lastExec)
        if (diff < 0) {
          execute()
        } else {
          timer = setTimeout(function() {
            execute()
          }, diff)
        }
      }
    }
  }

两者差别主要在于,简单实现是大于delay才会执行(也就是你两次滚动的间隔要大于delay),但是两次如果小于delay,则完全不会执行,而完整实现是即使两次滚动间隔小于delay,也会有一个定时器进行执行,防止你在第二次滚动之后,没有再滚动

2.debounce 
如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止。
也就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。

debounce使用场景:

  第一次触发后,进行倒计wait毫秒,如果倒计时过程中有其他触发,则重置倒计时;否则执行fn。用它来丢弃一些重复的密集操作、活动,直到流量减慢。例如:
              对用户输入的验证,不在输入过程中就处理,停止输入后进行验证足以;
              提交ajax时,不希望1s中内大量的请求被重复发送。

简单实现:

var debounce = function(idle, action){
  var last
  return function(){
    var ctx = this, args = arguments
    clearTimeout(last)
    last = setTimeout(function(){
        action.apply(ctx, args)
    }, idle)
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 实际上啊,今天早上本来想干点别的,但是在吃早餐的时候浏览了下掘金,然后看到了这篇博文 Jake的关于图片懒加载 ...
    6J阅读 13,300评论 1 23
  • 1 概念 首先讲讲关注函数节流这个概念的原因~~,其实还是因为业务驱动,在实现无限加载组件(就是滚动到底部,就可以...
    Coder_不易阅读 7,208评论 1 3
  • 防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案 debounce,去抖动。策略是当事件被触发时,设定一个...
    皇甫圣坤阅读 2,920评论 0 0
  • 前言 最近和前端的小伙伴们,在讨论面试题的时候。谈到了函数防抖和函数节流的应用场景和原理。于是,想深入研究一下两者...
    youthcity阅读 23,717评论 5 78
  • 记得,春日那夜 她受了委屈 躲在墙角偷偷的哭泣 他走了过来,轻轻的握住她的手 “别怕,我在呢。” 记得,那一雨夜 ...
    晨凉未央阅读 1,612评论 4 1