JavaScript的防抖和节流案例

JavaScript的防抖和节流是常用的优化技巧，可以有效地控制函数的执行频率，提升Web页面的性能和用户体验。本文将从原理、使用场景，以及基于两个实际案例的讲解，逐步深入介绍JavaScript的防抖和节流优化技巧。

一、防抖和节流的原理

防抖和节流的本质都是控制函数的执行频率，从而提升Web页面的性能。他们的实现方式不同，具体如下：

1. 防抖

防抖的原理是：当调用函数时，设置一个定时器，延迟一段时间触发函数执行。若在延迟期间内再次调用此函数，则清除之前的定时器，并重新设置一个新的定时器。在设置的延迟时间内，只会触发一次函数执行。若延迟时间内未再次调用此函数，则定时器到期时执行函数。

2. 节流

节流的原理是：当调用函数时，设置一个时间戳，记录当前时间，如果当前时间与上一次函数执行时间的时间差大于或等于指定时间，则触发函数执行，并更新时间戳为当前时间；反之，则不执行函数。

二、防抖和节流的使用场景

1. 防抖的使用场景

防抖通常用于优化input文本框、滚动窗口等需要频繁触发事件的场景。例如：

// input文本框，实时搜索用户输入的关键字
const input = document.querySelector('input')
const debounceHandle = debounce(() => {
  // 实现搜索功能
}, 500)
input.addEventListener('input', debounceHandle)

// 滚动窗口，实现懒加载图片
const lazyLoading = () => {
  // 实现懒加载
}
const throttleHandle = throttle(lazyLoading, 500)
window.addEventListener('scroll', throttleHandle)

2. 节流的使用场景

节流通常用于优化滚动加载、窗口resize等频繁触发事件的场景。例如：

// 滚动加载，每滚动一定区域就触发获取数据
const getData = () => {
  // 获取数据
}
const throttleHandle = throttle(getData, 500)
window.addEventListener('scroll', throttleHandle)

// 窗口resize，调整窗口大小时重新布局
const layout = () => {
  // 窗口resize时重新布局
}
const debounceHandle = debounce(layout, 500)
window.addEventListener('resize', debounceHandle)

三、基于实际案例的讲解

1. 防抖实际案例：实时搜索

假设我们在开发一个实时搜索功能的Web应用，当用户输入关键字时，我们需要实时搜索匹配的结果并展示在页面上。但是，由于input事件会在用户每次输入时触发，如果每次都去发起网络请求，会导致性能大幅下降。

此时，我们可以使用防抖技巧优化这个功能。具体实现方式为，在input事件回调函数中使用防抖函数来控制搜索函数的执行频率，从而达到优化的效果。

<input type="text" id="search"/>
<script>
const searchInput = document.getElementById('search')
const debounceHandle = debounce(() => {
  const keyword = searchInput.value.trim()
  // 请求搜索接口，获取数据并展示到页面上
}, 500)
// 绑定input事件，并使用防抖函数控制函数执行频率
searchInput.addEventListener('input', debounceHandle)
</script>

2. 节流实际案例：滚动加载

假设我们正在开发一个滚动加载数据的Web应用，当滚动窗口时，需要动态加载更多数据并展示在页面上。但是，如果每次scroll事件都触发数据加载函数执行，会导致性能下降。

此时，我们可以使用节流技巧来优化这个功能。具体实现方式为，在scroll回调函数中使用节流函数来控制数据加载函数的执行频率，从而达到优化的效果。

<ul id="list"></ul>
<script>
const list = document.getElementById('list')
// 加载数据的方法
const loadData = () => {
  // 加载数据并渲染到页面
}
// 在scroll事件中使用节流函数，控制数据加载执行频率
const throttleHandle = throttle(loadData, 500)
window.addEventListener('scroll', throttleHandle)
</script>

以上两个实际案例，通过防抖和节流技巧的运用，都可以有效地提升Web应用的性能和用户体验。当然，在其他相似的场景中，我们也可以类似地应用防抖和节流技巧来优化Web应用的性能。