js 函数节流和函数防抖及区别详解

最新推荐文章于 2025-06-12 17:10:21 发布

原创

最新推荐文章于 2025-06-12 17:10:21 发布 · 681 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #函数节流 #函数防抖

本文介绍了函数节流和函数防抖的概念，它们用于优化浏览器性能，防止频繁事件触发导致的性能浪费。主要讲解了应用场景、原理和封装示例，提供了自用的节流和防抖函数实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1. 前言
2. 函数节流
3. 函数防抖
4. 总结

1. 前言

浏览器中总是有一些操作非常耗费性能。所以就有了函数节流和函数防抖来提高浏览器性能。

函数节流：频繁触发一个事件时候，每隔一段时间，函数只会执行一次。

函数防抖：当触发一个时间后的n秒内，如果该事件没有被第二次触发，则执行。否，则重新开始计时。

2. 函数节流

函数节流应用场景：滚动条滚动事件，dom的拖拽事件等

例：
我们都知道滚动条滚动的时候触发事件的频率极其的频繁。监控滚动条的滚动事件，滚动一次该事件可以触发上百次。很显然，有时候，我们并不需要触发如此多的次数。

函数节流，由此而生。在固定的时间内，只触发一次。

以下是封装好的节流函数，自取直接可用👇

//节流函数
 /*
     @params （入参）
     callback:需要节流的函数。   必传！
     time:节流间隔时间点（也就是多久触发一次）不传的话默认是 300 毫秒
 */
//封装好的节流函数
 const onScroll = (callback,time = 300) => {
   
   
   let state = true