type
status
date
slug
summary
tags
category
icon
password
😀
防抖和节流你是否有时候傻傻分不清楚的时候? 教你一个技巧绝对不会再弄混。
先来认识一下这两个基础的概念,防抖节流是前端开发中常用的函数优化手段,它们可以限制函数的执行频率,提升性能和用户体验。在我们的日常开发中,经常会遇到一些需要对函数进行优化的场景,比如防止表单的重复提交。

防抖(debounce)

事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
防抖,顾名思义,防止抖动,什么叫抖动,事件被高频触发,想象你在用鼠标点击按钮操纵一个小人让他有跳跃的动作,你狂点鼠标,小人狂跳,这就是最直观的抖动现象。
直接上代码

节流(throttle)

规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
简单的可以理解为指定时间间隔只执行一次任务。
直接看代码:
注:节流函数并不止上面这种实现方案,例如可以完全不借助setTimeout,可以把状态位换成时间戳,然后利用时间戳差值是否大于指定间隔时间来做判定。也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在,如果存在表示还在冷却,并且在执行fn之后消除定时器表示激活,原理都一样。

防抖与节流的区别

上面已经介绍过两者的定义,我们在看下两者的区别,及如何来永远记住他们
防抖:它限制函数在一段连续的时间内只执行一次。当连续触发某个事件时,只有在事件停止触发一段时间后,才会执行函数。
节流:它按照固定的时间间隔执行函数。当连续触发某个事件时,每隔一段时间执行一次函数。
简而言之,防抖是在事件停止触发后延迟执行函数,而节流是按照固定的时间间隔执行函数。
王者荣耀大家都玩过吧,里面的英雄都有一个攻击间隔,当我们连续的点击普通攻击的时候,英雄的攻速并不会随着我们点击的越快而更快的攻击。这个其实就是节流,英雄会按照自身攻速的系数执行攻击,我们点的再快也没用。
而防抖在王者荣耀中就是回城,在游戏中经常会遇到连续回城嘲讽对手的玩家,它们每点击一次回城,后一次的回城都会打断前一次的回城,只有最后一次点击的回城会被触发,从而保证回城只执行一次,这就是防抖的概念。

应用场景

防抖:
search搜索联想,用户在不断输入值时,用防抖来节约请求资源。 window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
节流:
鼠标不断点击触发,mousedown(单位时间内只触发一次) 监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断
 
💡
有关Notion安装或者使用上的问题,欢迎您在底部评论区留言,一起交流~
Blog又双叒一次搬家了理解Promise,实现Promise
  • Twikoo