程序员之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS防抖和节流

JavaScript中防抖和节流的区别及适用场景

 更新时间：2022年05月30日 16:24:03   作者：? 是洋柿子啊?  ?  
这篇文章主要介绍了JavaScript中防抖和节流的区别及适用场景，文章通过围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

前言

防抖和节流，这个在我们的前端生涯中，这两个名词肯定不陌生，甚至经常被人问起：

  • 两者有什么区别？
  • 分别用于什么场景？

ps：这就是高频的面试题了吧！

防抖

防抖是什么呢？

形象的的说就是：防止抖动（防抖函数内心独白：“你就抖动吧！等你不抖动了，我们在进行下一步”）

例如

一个搜索输入框， 用户不停的进行输入（这个时候就是抖动的过程）， 等用户输入停止之后，再触发搜索。

代码演示

function debounce(fn, delay = 200) {
  let timer = 0
  return function() {
    // 如果这个函数已经被触发了
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}

节流

节流：节省交互沟通。

形象的的说就是：no！no！no！一个一个来，按照时间节奏来！插队禁止！

例如

drag（拖动）事件或者 scroll（滚动） 期间触发某个毁掉，要设置一个时间间隔。这时候就不能使用防抖了，为什么呢？

防抖是拖拽或者滚动结束之后才返回回调，但是我是需要在过程中进行触发回调，但是又不需要那么的频繁；这时候就使用节流函数，每隔一定的时间进项触发就好了！

代码演示

// 节流函数
function throttle(fn, delay = 200) {
  let  timer = 0
  return function () {
    if(timer){
      return
    }
    timer.setTimeout(() =>{
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}

咋一看，怎么和防抖函数好像怎么这么像？

区别仅仅在：

防抖：

 if(timer){
  clearTimeout(timer)
}

节流：

if(timer){
  return
}

他们在定时器已经有任务的时候的操作的不同。在我们上面介绍了防抖和节流的概念之后，大家应该都懂了。

防抖函数在每一次都有内容后进行清除是为了保证当前执行的函数就是当前规定的时间内执行的最后一次操作

 if(timer){
  clearTimeout(timer)
}

节流函数如此操作是为了保证，在规定的时间内只会执行一次这个操作，这就是两个函数从代码上看到的不同

if(timer){
  return
}

到此这篇关于JavaScript中防抖和节流的区别及适用场景的文章就介绍到这了,更多相关JS防抖和节流 内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

您可能感兴趣的文章:

相关文章

最新评论

?


http://www.vxiaotou.com