在前端开发中，性能优化是一个至关重要的环节。当处理频繁触发的事件时，如用户输入、窗口滚动、鼠标移动等，可能会导致性能问题。为了解决这些问题，防抖（debounce）和节流（throttle）技术应运而生。
一、防抖（Debounce）
1. 原理
防抖就是触发一个事件,设置一个定时器，在定时器计时期间，如果再次触发该事件，则重置定时器。只有在一段时间内没有再次触发该事件，定时器才会执行相应的回调函数。
简单来说，防抖就像是一个等待的过程，只有当用户在规定时间内没有再次触发事件时，才会真正执行相应的操作。
2. 代码实现
function debounce(fn, delay) {
let timer = null
return function () {
const args = arguments
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
以下是在 React 中对按钮点击事件进行防抖处理的例子：
import React from 'react'
export default function App() {
const onClick = () => {
console.log('onClick')
}
function debounce(fn, delay) {
let timer = null
return function () {
const args = arguments
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
const debouncedHandleClick = debounce(onClick, 1000);
return (
<div>
<button onClick={debouncedHandleClick}>点击我（防抖处理）</button>
</div>
)
}
3. 应用场景
- 搜索框实时搜索：当用户在搜索框中输入内容时，可能会频繁触发输入事件。如果每次输入都进行搜索请求，会导致大量的网络请求，影响性能。使用防抖技术，可以在用户停止输入一段时间后再进行搜索请求，减少不必要的网络请求。
- 窗口调整大小：当用户调整窗口大小时，会频繁触发窗口大小调整事件。如果在每次调整时都进行复杂的布局计算，会导致性能下降。使用防抖技术，可以在用户停止调整窗口大小一段时间后再进行布局计算，提高性能。
二、节流（Throttle）
1. 原理
节流是在规定的时间间隔内，无论事件被触发多少次，它只执行一次。
节流就像是一个阀门，控制着事件的执行频率，确保在一定时间内只执行一次操作。
2. 代码实现
function throttle(fn, delay) {
let timer = 0
return function () {
const args = arguments
const now = Date.now()
if (now - timer > delay) {
fn.apply(this, args)
timer = now
}
}
}
以下是在 React 中对按钮点击事件进行节流处理的例子：
import React from 'react'
export default function App() {
const onClick = () => {
console.log('onClick')
}
function throttle(fn, delay) {
let timer = 0
return function () {
const args = arguments
const now = Date.now()
if (now - timer > delay) {
fn.apply(this, args)
timer = now
}
}
}
const throttledHandleClick = throttle(onClick, 1000);
return (
<div>
<button onClick={throttledHandleClick}>点击我（节流处理）</button>
</div>
)
}
3. 应用场景
- 滚动事件：当用户滚动页面时，会频繁触发滚动事件。如果在每次滚动时都进行复杂的计算或数据加载，会导致性能下降。使用节流技术，可以在一定时间内只执行一次滚动事件处理函数，提高性能。
- 鼠标移动事件：当用户移动鼠标时，会频繁触发鼠标移动事件。如果在每次移动时都进行复杂的操作，会导致性能下降。使用节流技术，可以在一定时间内只执行一次鼠标移动事件处理函数，提高性能。
