JavaScript中的节流与防抖函数记不住?我的答案保你终身难忘【一小时搞懂,建议收藏】

前端性能优化-防抖和节流

前言

防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。

据说阿里有一道面试题就是谈谈函数节流和函数防抖。

防抖(debounce)

函数防抖(debounce):当持续触发事件时,在设置的周期内没有再触发事件,事件处理函数才会执行一次,如果设定的周期没有结束,又一次触发了事件,就重新开始延时。

为了有个直观的对比,我们先看下没有使用debounce技术的click事件:

在这里插入图片描述
我们看到,当用户频繁点击button按钮时,控制台会频繁的输出结果,这种频繁调用事件处理程序,会加重浏览器的负担,导致用户体验非常糟糕。

为了解决上述问题,我们在编码中可以使用debounce防抖技术。

防抖原理:是维护一个计时器,在规定的delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。

看一个🌰(栗子):

function debounce(fn, delay) {
   
  var timer = null;
  return function() {
   
     // 清除已存在的定时器
     timer && clearTimeout(timer)
     timer = setTimeout(<
  • 102
    点赞
  • 266
    收藏
    觉得还不错? 一键收藏
  • 72
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 72
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值