JS函数节流防抖实例详解

在前端开发中有一部分的用户行为会频繁的触发事件执行，而对于DOM操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数节流(throttle)和函数防抖(debounce)就是为了解决类似需求应运而生的。

函数节流(throttle)

函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下一样。

场景：

• 窗口调整（resize）

• 页面滚动（scroll）

• 抢购疯狂点击（mousedown）

实现：

underscore实现：

函数防抖(debounce)

函数防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次。好像公交司机会等人都上车后才出站一样。

场景：

• 实时搜索（keyup）

• 拖拽（mousemove）

实现：

underscore实现：

函数节流(throttle)和函数防抖(debounce)都是通过延时逻辑操作来提升性能的方法，在前端优化中是常见且重要的解决方式。可以从概念和实际应用中理解两者的区别，在需要的时候选择合适的方法处理。

相关推荐：

详解javascript函数的节流与防抖

详细分析JS函数去抖和节流_基础知识

函数节流与防抖的含义

以上就是JS函数节流防抖实例详解的详细内容，更多请关注Gxl网其它相关文章！