摘要：运用防抖和节流可以有效降低代码的执行频率，从而解决高频率事件的页面卡顿问题。在阶段布局，最终确定显示的位置和大小。在函数中，首先定义了一个空的定时器变量，用来计算时间间隔。还有一点要注意，在中一定要清楚定时器，不然会影响的条件判断。
啥是节流？
节流是保证在一段时间内，代码只执行了一次。这个一段时间内指的是不管用户操作了几次，最终仅执行一次。比如说一个按钮，用户狂点按钮，但是如果用节流技术的话，不管用户点击了几次，最终某个时间段内只执行了一次代码。这个时间段是可以自行设置，比如说每一秒执行一次。
啥是防抖？
防抖其实和节流有些类似，毕竟它们的最终目的都是如出一辙。防抖是在一段时间结束之后，才触发一次事件。如果一段时间内未结束再次触发了事件，那么就会重新计算这段时间。同样的例子，还是用户狂点按钮。但是仅在用户停止点击按钮后的一段时间之后才会执行一次。如果用户暂停点击按钮的时间不到一段时间内又再次点击按钮，那么就会重新计算时间。这个时间同样可以自行设置。
为啥要防抖或节流呢？
为了优化高频率事件，比如说onscroll滚动 oninput搜索框联想 resize窗口大小变化 onkeydown onkeyup...等等。这些高频率事件很有可能导致页面卡顿，影响用户体验。运用防抖和节流可以有效降低代码的执行频率，从而解决高频率事件的页面卡顿问题。或许还有疑问，为啥高频事件就会导致页面卡顿呢？
这就要从页面的展示过程说起了。
页面的展示过程
展示过程大致为以下顺序:
Javascript -> Style -> Layout -> Paint -> Composite
首先，Javascript阶段会往页面中添加一些DOM或动画，然后到Style阶段确定每个DOM应该用什么样式规则。在Layout阶段布局，最终确定DOM显示的位置和大小。在Paint阶段进行DOM的绘制，它是在不同层上进行绘制。注意，样式变化是重绘，布局和位置变化是重排。重排一定导致重绘，重绘不一定导致重排。最后一个阶段Composite进行渲染层合并。(所以做一些动画效果尽量用CSS3的transform等属性，因为该属性是脱离文档流，不用合并渲染层的。)由此可见，如果触发了很多高频率的事件，就会导致页面不停的确定位置和大小 ，不停的重排重绘并且合并渲染层。所以导致页面卡顿也可以解释了。
接下来会用例子来一步步实现节流和防抖的原理。
节流
首先 比如页面上有个按钮，用户可以点击该按钮。该按钮上绑定了一个点击事件，用户可以疯狂点击触发该事件，肯定结果就是疯狂触发该事件。目标是让该按钮不管用户点击的多快，最终该事件每秒仅执行一次。
throttle
按钮
可以看到，用户疯狂点击了20次，那么该事件也理所当然的执行了20次，这显然不是我们想要的。
基础版:
按钮
为了尽可能的减少篇幅，把一些无用的代码都删除了。
定义一个throttle方法，该方法传入了两个参数，一个是要执行的事件，另一个是间隔时间。该throttle方法是一个闭包的写法，并且返回了一个函数。首先定义了上次的时间戳pre，pre默认第一次为0。然后获取到当前时间，用当前时间减去上次的时间戳也就是pre，如果这个差值大于了传递的时间间隔wait，也就表明可以执行下一次的函数了。所以执行方法并且传递this和参数。并把当前时间赋给pre，以便做下一次节流的判断。 看下效果:
可以看到，虽然疯狂点击按钮，但是事件却没有疯狂触发，保持了每一秒执行一次的速度。也就达成了我们的目标。
但是还有一个问题就是，我最后点击按钮的那次也应该延迟触发最后一次的事件，但是结果并没有。需要补上最后一次没有触发事件的问题，接下来优化它。
进阶版：
按钮
很明显看到，进阶版多传了一个参数对象，trailing:true。该参数用来表示是否执行最后一次触发的方法。
在函数中，首先定义了一个空的定时器变量timeout，用来计算时间间隔。其次多了一个else if的条件判断，判断如果时间间隔小于wait，就表示该方法要保留起来延迟去执行。所以生成了一个定时器，延迟执行later函数，later函数就是执行该func函数。此处注意一点，这个延迟时间的问题。延迟时间不能是wait，必须是wait减去当前时间和上次时间的时间奖额。剩下的才是剩余时间延迟。还有一点要注意，在if中一定要清楚定时器，不然会影响else if的条件判断。经过测试，确实能在点击的最后一次后，延迟不到一秒触发了该事件。
剩下最后一个优化点，其实第一次点击按钮，也应该延迟触发事件。目前的版本是点击按钮的第一次就直接触发该事件。优化它：
最终版：
按钮
可以看到，传递一个新的参数对象leading为false。用来表示第一次也延迟执行。那么问题来了，怎样才能第一次延迟执行呢？实现其实很简单，进阶版已经实现了else if延迟执行，现只需让第一次不走if，走else if就可实现第一次的延迟执行。总共改动仅两处，第一处：判断用户是否传递了参数leading为false。如果传递了leading为false，则把当前时间now赋给上次时间pre。为何这样做呢? 目的就是为了第一步的时候也走else if。这么看。pre=now 那么if判断条件就相当与now-now。now-now=0，当然不满足if条件，即第一次走了else if。这还不算完，在else if中要校正pre时间。如果option.leading为false，那么pre就初始为0。pre为0的就会走if。只有走了if才会清空定时器，不然的话只会执行一次便不会继续往下执行。因为if和else if的判断条件都不满足。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117494.html
摘要：运用防抖和节流可以有效降低代码的执行频率，从而解决高频率事件的页面卡顿问题。在阶段布局，最终确定显示的位置和大小。在函数中，首先定义了一个空的定时器变量，用来计算时间间隔。还有一点要注意，在中一定要清楚定时器，不然会影响的条件判断。 啥是节流？ 节流是保证在一段时间内，代码只执行了一次。这个一段时间内指的是不管用户操作了几次，最终仅执行一次。比如说一个按钮，用户狂点按钮，但是如果用节流...
摘要：运用防抖和节流可以有效降低代码的执行频率，从而解决高频率事件的页面卡顿问题。在阶段布局，最终确定显示的位置和大小。在函数中，首先定义了一个空的定时器变量，用来计算时间间隔。还有一点要注意，在中一定要清楚定时器，不然会影响的条件判断。 啥是节流？ 节流是保证在一段时间内，代码只执行了一次。这个一段时间内指的是不管用户操作了几次，最终仅执行一次。比如说一个按钮，用户狂点按钮，但是如果用节流...
摘要：函数防抖和节流，都是控制事件触发频率的方法。封装一个函数，让持续触发的事件监听是我们封装的这个函数，将目标函数作为回调传进去，等待一段时间过后执行目标函数第二点实现了，再看第一点持续触发不执行。 曾经面试时候被问到过这个，年少的我一脸无知。。。 后来工作中遇到了一个场景：输入名称的同时去服务器校验名称是否重复，但发现之前的代码竟然都没做限制，输入一次发一次请求。简直忍不了，就在项目的u...
摘要：文章来源详谈防抖和节流轻松理解函数节流和函数防抖函数防抖和节流好啦，今天的小菊花课堂之的防抖与节流的内容就告一段落啦，感各位能耐心看到这里。 前言 陆游有一首《冬夜读书示子聿》——古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。，其中的意思想必大家都能明白，在学习或工作中，不断的印证着这首诗的内涵。所以，又有了此篇小菊花文章。 详解 在前端开发中，我们经常会碰到一些会持...
摘要：文章来源详谈防抖和节流轻松理解函数节流和函数防抖函数防抖和节流好啦，今天的小菊花课堂之的防抖与节流的内容就告一段落啦，感各位能耐心看到这里。 前言 陆游有一首《冬夜读书示子聿》——古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。，其中的意思想必大家都能明白，在学习或工作中，不断的印证着这首诗的内涵。所以，又有了此篇小菊花文章。 详解 在前端开发中，我们经常会碰到一些会持...
阅读 995·2021-11-23 09:51
阅读 1025·2021-11-19 09:40
阅读 1842·2021-10-08 10:05
阅读 2374·2021-09-26 09:47
阅读 2398·2021-09-02 15:41
阅读 2077·2019-08-30 15:56
阅读 1628·2019-08-30 15:55
阅读 2468·2019-08-30 15:55
