防抖与节流，JS功底有没有两把刷子，就靠它们了

一、防抖与节流的区别

防抖和节流都是用来处理事件的技术，但它们的工作方式不同。

1. 防抖：

防抖是在一段时间内，只执行一次事件处理函数。当事件频繁触发时，防抖函数会忽略中间的触发，只执行最后一次触发。

2. 节流：

节流是在一段时间内，只允许事件处理函数执行一次。当事件频繁触发时，节流函数会忽略中间的触发，只执行第一次触发。

二、防抖与节流的应用场景

1. 防抖：

防抖适用于以下场景：

• 搜索框输入：当用户在搜索框中输入时，防抖函数可以防止搜索框每输入一个字符就发送一次搜索请求。
• 窗口大小改变：当用户改变窗口大小时，防抖函数可以防止窗口大小改变时频繁触发窗口大小改变事件。
• 滚动事件：当用户滚动页面时，防抖函数可以防止滚动事件频繁触发。

2. 节流：

节流适用于以下场景：

• 鼠标移动：当用户移动鼠标时，节流函数可以防止鼠标移动时频繁触发鼠标移动事件。
• 键盘输入：当用户输入时，节流函数可以防止键盘输入时频繁触发键盘输入事件。
• 点击事件：当用户点击时，节流函数可以防止点击时频繁触发点击事件。

三、防抖与节流的实现

1. 防抖：

实现防抖函数的常见方法有两种：

• 使用定时器：在事件触发后，设置一个定时器，在定时器到期后执行事件处理函数。
• 使用闭包：在事件触发后，创建一个闭包函数，闭包函数中包含事件处理函数。当事件再次触发时，闭包函数会检查定时器是否到期，如果到期则执行事件处理函数。

2. 节流：

实现节流函数的常见方法有两种：

• 使用定时器：在事件触发后，设置一个定时器，在定时器到期后执行事件处理函数。当事件再次触发时，如果定时器没有到期，则忽略该事件。
• 使用闭包：在事件触发后，创建一个闭包函数，闭包函数中包含事件处理函数和一个变量。当事件再次触发时，闭包函数会检查变量的值，如果变量的值为true，则忽略该事件。当定时器到期时，闭包函数会将变量的值设置为false。

四、防抖与节流的比较

特性	防抖	节流
事件触发频率	频繁	频繁
执行频率	一次	一次
触发时间	最后一次触发	第一次触发
应用场景	搜索框输入、窗口大小改变、滚动事件	鼠标移动、键盘输入、点击事件

五、总结

防抖和节流都是JavaScript中用来处理事件的技术，它们可以优化性能，提高用户体验。在实际开发中，我们可以根据不同的场景选择合适的技术来处理事件。