JS中节流函数介绍与实现（秒懂如何手写节流）

目录

一、认识节流函数

1节流函数的概念

2.节流函数原理

3.节流函数的实现方式

4.防抖与节流的区别

二、节流函数的实现

1.CDN引入实现

2.本地引入实现

 3.手写节流（初步实现）

 4.手写防抖（高级实现）

三、节流函数的应用

四、最终实现函数封装

---

一、认识节流函数

1节流函数的概念

节流函数是一种用于控制函数执行频率的技术。它可以确保函数在一定时间间隔内最多只执行一次，从而避免频繁触发导致性能问题或不必要的资源消耗。

2.节流函数原理

节流函数通过延迟执行处理函数的方式来解决这个问题。它会设置一个时间间隔，只有当两次事件触发的时间间隔超过了这个设定的时间间隔时，才会执行处理函数。如果两次触发事件的时间间隔小于设定的时间间隔，那么处理函数就不会被执行，从而实现了控制函数执行频率的效果。

3.节流函数的实现方式

• 定时器版节流：使用 setTimeout 来延迟执行处理函数，每次事件触发时设置一个定时器，在定时器到期后执行处理函数，并清除定时器。
• 时间