摘要：目的都是为了降低回调函数执行频率，节省计算机资源，优化性能，提升用户体验。函数防抖事件频繁触发的情况下，只有经过足够的空闲时间，才执行代码一次。
“函数节流”和“函数防抖”的对比分析 一、前言
前端开发中，“函数节流（throttle）” 和 “函数防抖（debounce）” 作为常用的性能优化方法，两者都是用于优化高频率执行 js 代码的手段，那具体它们有什么异同点呢？有对这两个概念不太了解的小伙伴，可以移步本人之前所写的 JS进阶篇1---函数节流（throttle） 和 JS进阶篇2---函数防抖（debounce）。
二、背景介绍大家都知道，液晶显示器的屏幕刷新率通常为 60Hz ，即每秒屏幕内容刷新 60 次，那为什么是 60 次，而不是 30 次，或者 90 次呢？这是因为，当液晶显示器的屏幕刷新率为 60Hz 的时候（这里只讨论液晶显示器），人肉眼再也不能察觉出屏幕的闪烁现象，低于这个刷新频率画面会有卡顿现象，而高于这个频率的话，又会造成额外的资源和能源浪费，因此，液晶显示器的默认屏幕刷新率为 60Hz。
同理，在前端开发过程中，有一些会被高频触发的事件，例如 resize、scroll、mousemove 等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数，达到一定频率就足够了，因为超过这个频率之后，无论代码执行多少次，带来的效果也是一样，所以倒不如把 js 代码的执行次数控制在合理的范围。这样既可以节省计算机资源，又可以保证浏览的流畅性，这就是 “函数节流” 和 “函数防抖” 要解决的问题。
三、异同分析 相同点实现：都可以通过使用 setTimeout 实现。
目的：都是为了降低回调函数执行频率，节省计算机资源，优化性能，提升用户体验。
本质：都是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段，实质上并未减少事件触发次数。
不同点函数节流：一定时间内，控制 js 方法只执行一次。（例如：通常每隔一段时间，如 3s，人就会眨一次眼睛）。
函数防抖：事件频繁触发的情况下，只有经过足够的空闲时间，才执行代码一次。（举个栗子：乘坐电梯时，电梯只有检测到没有人进入，并经过一段时间之后（例如 10s），才会关闭电梯入口运行）。
函数节流：声明一个变量当标志位，记录当前代码是否在执行。如果空闲，则可以正常触发方法执行。如果代码正在执行，则取消这次方法执行，直接 return。
函数防抖：需要一个 setTimeout 来辅助实现，延迟执行需要执行的代码。如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始计时。如果在计时期间事件没有被重新触发，才执行代码一次。
函数节流：函数节流的要点是，声明一个变量当标志位，记录当前代码是否在执行。
函数防抖：用 setTimeout 函数做缓存池，而且可以轻易地清除待执行的代码。
“函数节流” 使用场景
百度搜索框的输入联想功能
防止高频点击提交，防止表单重复提交
懒加载、加载更多、图片瀑布流或监听滚动条位置
“函数防抖” 使用场景
用户名、手机号、邮箱输入验证
搜索框输入关键字后，只需用户最后一次输入完，再发送请求
改变浏览器窗口大小时，只需窗口调整完成后，再执行 resize 事件中的函数，计算窗口大小，重新排布元素，防止重复渲染。
心得总结不管是 “函数节流” 还是 “函数防抖”，都是用来进行性能优化的方式，也都是在项目开发过程中，为了解决开发中的实际问题而慢慢发展而来的，一定要在合适的场合才用正确的方法使用它们，切忌滥用，不然不仅不会发挥它们该有的作用，还会影响代码执行的正确性。有疑问或者建议，记得在评论区提出哦，欢迎留言！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105100.html
摘要：函数防抖的要点，是需要一个来辅助实现，延迟运行需要执行的代码。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。而非立即执行版指的是触发事件后函数会立即执行，然后秒内不触发事件才能继续执行函数的效果。。 JS中的函数防抖 一、什么是函数防抖 概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重...
摘要：专题系列共计篇，主要研究日常开发中一些功能点的实现，比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等，特点是研究专题之函数组合专题系列第十六篇，讲解函数组合，并且使用柯里化和函数组合实现模式需求我们需要写一个函数，输入，返回。 JavaScript 专题之从零实现 jQuery 的 extend JavaScritp 专题系列第七篇，讲解如何从零实现一个 jQuery 的 ext...
摘要：运用防抖和节流可以有效降低代码的执行频率，从而解决高频率事件的页面卡顿问题。在阶段布局，最终确定显示的位置和大小。在函数中，首先定义了一个空的定时器变量，用来计算时间间隔。还有一点要注意，在中一定要清楚定时器，不然会影响的条件判断。 啥是节流？ 节流是保证在一段时间内，代码只执行了一次。这个一段时间内指的是不管用户操作了几次，最终仅执行一次。比如说一个按钮，用户狂点按钮，但是如果用节流...
摘要：运用防抖和节流可以有效降低代码的执行频率，从而解决高频率事件的页面卡顿问题。在阶段布局，最终确定显示的位置和大小。在函数中，首先定义了一个空的定时器变量，用来计算时间间隔。还有一点要注意，在中一定要清楚定时器，不然会影响的条件判断。 啥是节流？ 节流是保证在一段时间内，代码只执行了一次。这个一段时间内指的是不管用户操作了几次，最终仅执行一次。比如说一个按钮，用户狂点按钮，但是如果用节流...
摘要：运用防抖和节流可以有效降低代码的执行频率，从而解决高频率事件的页面卡顿问题。在阶段布局，最终确定显示的位置和大小。在函数中，首先定义了一个空的定时器变量，用来计算时间间隔。还有一点要注意，在中一定要清楚定时器，不然会影响的条件判断。 啥是节流？ 节流是保证在一段时间内，代码只执行了一次。这个一段时间内指的是不管用户操作了几次，最终仅执行一次。比如说一个按钮，用户狂点按钮，但是如果用节流...
阅读 2762·2023-04-25 18:00
阅读 1947·2021-11-23 10:07
阅读 3794·2021-11-22 09:34
阅读 973·2021-10-08 10:05
阅读 1356·2019-08-30 15:55
阅读 3101·2019-08-30 11:21
阅读 3150·2019-08-29 13:01
阅读 1197·2019-08-26 18:26
