防抖节流
Posted 肥晨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了防抖节流相关的知识，希望对你有一定的参考价值。
防抖：
定义：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
存在的意义：如果事件处理函数调用的频率无限制，会加重浏览器的负担，浏览器的性能是有限的，导致用户体验非常糟糕。需要减少调用频率，同时又不影响实际效果。
实现效果：如果短时间内大量触发同一事件，只会执行一次函数。
如何实现：利用setTimeout()和clearTimeout()
节流：
定义：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
存在的意义：如果事件处理函数调用的频率无限制，会加重浏览器的负担，浏览器的性能是有限的，导致用户体验非常糟糕。需要减少调用频率，同时又不影响实际效果。
实现效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。
如何实现：利用setTimeout()和clearTimeout()
差距：
防抖：过了时间才会触发第一次
常用于：搜索框input事件、页面resize事件、拖动滚动条事件等
为什么：因为都是只需要最终值的事件
节流：第一次触发过后 过了时间才会触发第二次
常用于：按钮、鼠标移动事件等
为什么：需要先触发一次
以上是关于防抖节流的主要内容，如果未能解决你的问题，请参考以下文章