在前端开发中，防抖和节流是两个常用的性能优化技巧。它们可以帮助我们解决频繁触发事件时页面卡顿、响应缓慢等问题，提高页面的效率和用户体验。
什么是防抖？
防抖就是在一定时间内，只执行最后一次触发事件的操作，避免事件重复执行。比如在搜索框输入关键词时，每输入一个字母就会触发一次搜索请求。使用防抖技术可以让用户在一定的时间内输入关键词，等待用户输入完成后再向服务器发送请求，避免了冗余请求和等待时间过长。以下是基于定时器实现的防抖函数代码：
function debounce(fn, delay) {
let timerId
return function(...args) {
clearTimeout(timerId)
timerId = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
clearTimeout()的作用：
**
在节流函数中，调用
clearTimeout方法的作用是取消之前设置的定时器，从而避免被连续触发的事件导致定时器不断累积并在一定时刻内同时执行多次事件处理函数。具体来说，当事件被触发时，先检查定时器是否已经被设置。如果没有设置，则创建一个新的定时器并设置一定的延迟时间，然后等待该延迟时间结束后执行相应的事件处理函数。如果在这段时间内再次触发了事件，就调用
clearTimeout方法取消之前设置的定时器，同时再次创建一个新的定时器，重新开始计时等待下一次事件触发。使用
clearTimeout方法，可以确保在等待时间内只有最后一次事件触发会执行相应的事件处理函数，从而避免重复执行和浪费资源。**
什么是节流？
节流就是每隔一段时间执行一次事件处理函数，控制事件执行频率。比如在滚动页面时，页面滚动事件会频繁地触发，导致页面卡顿或者无响应。使用节流技术可以控制滚动事件的执行频率，每隔一段时间才会执行一次事件处理函数，从而保证页面滚动的流畅性和性能。以下是基于时间戳实现的节流函数代码：
function throttle(fn, delay) {
let previous = 0
return function(...args) {
const now = Date.now()
if (now - previous > delay) {
fn.apply(this, args)
previous = now
}
}
}
防抖和节流的区别
虽然防抖和节流都是为了优化性能而生，但是它们的实现方式和应用场景有所不同。
- 防抖：当事件触发时，也就是每一次事件的发生，定时器被重新开始计时，只有当事件触发后的一定时间内没有再次触发，定时器才真的去执行相应的操作，否则定时器将重新被启动重新计时。适用于一些非常耗时的操作，比如读取文件等。也适用于一些需要用户进行连续触发的操作，比如下拉加载等场景。
- 节流：当事件触发时，如果在一定时间内（例如 100 毫秒）内再次被触发，只有忽略后来触发的事件，等过了这段时间之后才继续执行事件。适用于一些反复触发的操作，比如页面的滚动、鼠标的移动等场景。
防抖和节流的实际应用场景
防抖和节流技术在实际开发中应用广泛，以下是几个常见的应用场景：
- 实时搜索框中输入关键词时，使用防抖技术避免频繁发送请求；
- 页面滚动监听滚动事件时，使用节流技术控制事件处理函数的执行频率；
- 表单提交后进行处理时，使用防抖技术避免频繁请求服务器。
结尾
防抖和节流技术的应用可以从不同角度解决性能问题，提高用户体验。在实际开发中，根据具体业务场景，选择合适的技术和实现方式，可以更好地优化页面效率和性能。
。。。
。。。
🤡🤡🤡其实还没有结束啦。防抖与节流等文章想必各位读者们在掘金都已经看倦了，但是我为什么又要写一篇呢？接下来步入正题😎
因为这篇文章压根就不是我写的！！！
而它的作者就是当今最火的Chatgpt啦。小chat在笔者轻微的调教下变得温顺听话，根据我的需求顺利地写出了这篇文章。
