函数的防抖和节流文章

概念

所谓函数的防抖和函数的节流，是一种优化程序性能的技术。主要应用于事件处理程序中

什么情况下需要使用防抖和节流？

在元素触发一些事件，并且有可能频繁执行事件处理程序的时候。

如：onscroll,onkeyup,oninput,onmousemove等需要频繁执行事件处理程序的事件，事件的高频触发，事件处理程序频繁无限的执行，给浏览器造成了很大的压力，用户体验也很不好。特别是在一些事件触发后，如果需要向后台进行一些异步请求，高频的请求，会对服务器造成很大压力，大大消耗请求资源。因此，函数的防抖和函数的节流，可以很好的处理以上问题

我们不难理解高频触发事件的现象：

image.png

函数防抖：debounce

原理：简单来说就是将频繁执行的事件处理程序，通过处理，保证返回最后一次的执行。

分解：在事件处理程序中,设定一个程序延迟执行的时间ms,ms时间内等待执行，如果在ms时间内，频繁触发事件，先清除上一次在等待执行的程序，再开启下一次的程序并等待执行，如果ms时间后，不再重复触发事件，则执行最后一次等待执行的程序。核心方法，使用setTimeout()将程序延迟执行;

应用场景：如侧边栏，随屏幕滚动时，只需要得到屏幕向下滚动的最后位置作为侧边栏的移动目标值就可以了。

image.png

函数节流：throttle

原理：简单来说就是将频繁执行的事件处理程序，通过处理，单位时间内保证只执行一次，以此达到降低事件触发频率的目的。

分解：

应用场景：比如懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费资源；另外还有做商品预览图的放大镜效果时，不必每次鼠标移动都计算位置。

image.png

总结：

函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在ms时间后触发函数，如果在ms时间内再次触发的话，就会取消之前的计时器并重新设置。这样一来，只有最后一次触发的事件才会真正的执行需要执行的程序。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数

作者：CK

来源：

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。