美文网首页前端JavaScript的技术技巧交流~
函数节流(throttle)与函数去抖(debounce)记录

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

作者: chouchou723 | 来源:发表于2018-12-21 11:25 被阅读0次

    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)
      }
    }
    

    相关文章

      网友评论

        本文标题:函数节流(throttle)与函数去抖(debounce)记录

        本文链接:https://www.haomeiwen.com/subject/zacmkqtx.html