type
status
date
slug
summary
tags
category
icon
password
防抖和节流你是否有时候傻傻分不清楚的时候？
教你一个技巧绝对不会再弄混。
先来认识一下这两个基础的概念，
防抖和节流是前端开发中常用的函数优化手段，它们可以限制函数的执行频率，提升性能和用户体验。在我们的日常开发中，经常会遇到一些需要对函数进行优化的场景，比如防止表单的重复提交。防抖(debounce)
事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
防抖，顾名思义，防止抖动，什么叫抖动，事件被高频触发，想象你在用鼠标点击按钮操纵一个小人让他有跳跃的动作，你狂点鼠标，小人狂跳，这就是最直观的抖动现象。
直接上代码
节流(throttle)
规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
简单的可以理解为指定时间间隔只执行一次任务。
直接看代码：
注：节流函数并不止上面这种实现方案,例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样。
防抖与节流的区别
上面已经介绍过两者的定义，我们在看下两者的区别，及如何来永远记住他们
防抖：它限制函数在一段连续的时间内只执行一次。当连续触发某个事件时，只有在事件停止触发一段时间后，才会执行函数。
节流：它按照固定的时间间隔执行函数。当连续触发某个事件时，每隔一段时间执行一次函数。
简而言之，防抖是在事件停止触发后延迟执行函数，而节流是按照固定的时间间隔执行函数。
王者荣耀大家都玩过吧，里面的英雄都有一个
攻击间隔，当我们连续的点击普通攻击的时候，英雄的攻速并不会随着我们点击的越快而更快的攻击。这个其实就是节流，英雄会按照自身攻速的系数执行攻击，我们点的再快也没用。而防抖在王者荣耀中就是
回城，在游戏中经常会遇到连续回城嘲讽对手的玩家，它们每点击一次回城，后一次的回城都会打断前一次的回城，只有最后一次点击的回城会被触发，从而保证回城只执行一次，这就是防抖的概念。应用场景
防抖：
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
节流：
鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~
- 作者:esmiler
- 链接:https://blog.jddfe.com/article/410f936e-efdb-4f8b-b8e7-af270b3659d3
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。