JavaScript 五十问——认真聊一聊去抖与节流

chadLi 发布于2019-08-02 14:05 / 561人阅读

摘要：前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔而去抖动会指定事件不触发的时间间隔。

前言

无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。
总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔；而去抖动会指定事件不触发的时间间隔。从结果上来看，节流降低了时间处理的敏感度；而去抖对从触发事件先存储起来，等到超过指定事件间隔后，一起发送。
越来越晕，直接上代码:
HTML

这里有一个供用户搜索使用的input标签，有一个input事件会触发的处理函数fatch，这个fatch会根据input的value值向后台去请求联想词。
上面代码思路是没有问题的，但是如果不做触发限制的话，可能会产生大量的http请求，而这些请求里面很多可能意义不大，为我们的优化提供了空间；下面，我就采用节流和去抖两种思路来解决这个问题。（一般针对input这种情况，使用去抖解决；这里只是方便做代码说明）

节流

function jieliu (func, time){//func 执行函数， time 时间间隔
  let lastRun = null
  
  return function(){
    const now = new Date()
    if(now - lastRun > time){
      func(...arguments)
      lastRun = now
    }
  }
}


const listener = jieliu(function(value){//监听函数，指定间隔时间
  console.log(value)
}, 1000)

const input = document.querySelector("input")
//调用方法
input.addEventListener("input", function(event){
     listener(event.target.value)
})

以上是比较简单的节流实现以及基本的调用方式；使用闭包是为了保存每一次执行的lastRun。基本实现了限制请求频率的需求，但忽略了最后一个的触发。
改进如下：

function jieliu (func, time){// 触发时间间隔>time 发送请求
  let lastRun = null
  let timeout = undefined
  return function(){
    const self = this; 
    const now = new Date()
    if(now - lastRun > time){
      if(timeout){
        clearTimeout(timeout)
        timeout = undefined
      }
      func.apply(self, arguments)
      lastRun = now
    }
    else{
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
    }
  }
}

加入timeout，判断是否是最后一次请求。

去抖动

function qudou(func, time){
  let timeout = undefined
  
  return function(){
    const argu = arguments
    const self = this

    if(timeout){
      clearTimeout(timeout)
      timeout = undefined
    }else{
        timeout = setTimeout(func.apply(this, arguments), time)
    }
  }
}

以上简单实现去抖动，同样，最后一次事件不能够触发处理函数。

改进如下：

function qudou(func, time){//判断连续time时间内不触发，发送func请求
  let timeout = undefined;
  let lastRun = null
  return function(){
    const self = this
    const now = new Date()
    if(now - lastRun > time){
      func.apply(self, arguments)
    }
    else {
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
      else {
        clearTimeout(timeout)
        timeout = undefined
      }
    }
    lastRun = new Date()
  }
}

总结

通篇写下来，节流主要的实现方式还是通过对比“now”与“lastRun”的时间差，进而减少处理函数的调用次数；而防抖还是通过settimeout来延缓处理函数的调用时机，进而把多次触发的结果汇总一起调用处理函数。

后记

节流与去抖动两种方案还是有很大不同的，很多人包括我都很容易搞混。如果大家有更好的解决方案或者需要讨论的地方，欢迎在踊跃留言！

云服务器专线服务聊一聊去抖五十问聊一聊来聊一聊

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53564.html

JavaScript 五十问——认真聊一聊去抖与节流

摘要：前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔而去抖动会指定事件不触发的时间间隔。前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔；而去抖动会指定事件不触发的时间间隔...

EscapedDog 2019-08-23 14:38 评论0 收藏0
Javascript 五十问——实现的继承多种方式

摘要：组合继承实现了属性分离，方法共享下的完美继承方案继承我们的主角，，就是对组合继承的改进。这也是为什么在子类构造函数中一定要显示调用的原因。谈到继承，或者更广义上的：一个对象可以使用另外一个对象的属性或方法。实现起来无外乎有两种方式：apply or call 改变this的作用域原型继承改变__proto__指向，添加作用域链而JavaScript所有的继承实现，都是围绕以上两点...

BlackHole1 2019-08-23 14:37 评论0 收藏0
JavaScript 五十问——从源码分析 ES6 Class 的实现机制

摘要：防止类的构造函数以普通函数的方式调用。这个函数的主要作用是通过给类添加方法，其中将静态方法添加到构造函数上，将非静态的方法添加到构造函数的原型对象上。 Class是ES6中新加入的继承机制，实际是Javascript关于原型继承机制的语法糖，本质上是对原型继承的封装。本文将会讨论：1、ES6 class的实现细2、相关Object API盘点3、Javascript中的继承实现方案盘点...

LeexMuller 2019-08-23 14:38 评论0 收藏0
JS中的函数去抖与节流

摘要：上段代码的一个问题是，事件会在定时器结束后被触发，因此会出现一定的延迟，如果想让事件被立即触发，可以使用以下的去抖函数但是，对于去抖来说，在某些场景下是不合适的，因此我们可以使用节流。参考文章游戏星人眼中的节流与去抖（很生动）函数去抖与节流 Debounce：函数去抖就是对于一定时间段的连续的函数调用，只让其执行一次Throttle：函数节流就是让连续执行的函数，变成固定时间段间断...

fuchenxuan 2019-08-23 10:49 评论0 收藏0
JavaScript五十问——对比来说CSS的Grid与FlexBox（上篇）

摘要：前言春节假期有幸拜读了张鑫旭大大的关于与的两篇文章见参考文献，很有收获自己在开发的过程中，很多时候都会采用布局，而与这种方式已经很少使用了这次在春假期间学习了，深感的好用与便利。相对于，它多出来一个的属性，代表拉伸默认属性。前言春节假期有幸拜读了张鑫旭大大的关于Flex与Grid的两篇文章（见参考文献），很有收获；自己在开发的过程中，很多时候都会采用Flex布局，而Float与in...

xuhong 2019-08-30 15:55 评论0 收藏0