很多时候，我们都会觉得防抖和节流是一回事，其实不然，他们还是有很大区别的。
首先说防抖，当一个按钮，你拼命点击，我就不处理，等你什么时候消停了，我取你最后一次点击作为有效的，然后请求后台接口，这个就是防抖。
实际开发中，我们直接使用 lodash 的 debounce 函数来实现防抖。
// 例如，下面是一个带有搜索框的页面，并且需要在用户停止输入 500 毫秒后才开始搜索：
function search(keyword) {
// 根据关键词进行搜索
console.log(`Searching for '${keyword}'...`)
}
const inputEl = document.getElementById('search-input');
// 创建 debounce 函数，最多每 500 毫秒执行一次 search 函数
const debouncedSearch = _.debounce(search, 500);
// 监听 input 变化，如果有变化则调用 debouncedSearch 函数
// 每当出现输入变化时，我们会将输入内容传递给 `debouncedSearch` 函数，这个函数会将搜索操作延迟 500 毫秒后执行。因此，只有用户停止输入 500 毫秒之后，才会真正执行搜索操作
inputEl.addEventListener('input', (evt) => {
const keyword = evt.target.value.trim();
debouncedSearch(keyword);
});
再来说节流，比如我有一个拖拽的div，我希望每当拖拽发生时，要时刻获取div的XY轴的坐标，比如叫做getPosition函数。因为浏览器的运行速度是极快的，当拖拽发生时，就会过于频繁的触发，这样就很浪费性能，也没必要。
于是，我们希望每隔100ms就触发一次，而不是时刻都在触发，这种有节奏的触发，就是节流。
节流函数可以限制一个函数在一定时间范围内最多执行一次。也就是说，如果同一个函数在短时间内多次触发，这个函数只会以固定的频率执行。
实际开发中，我们直接使用 lodash 的 throttle 函数来实现节流。
// 例如，下面是一个点击按钮时，最多每隔 1 秒输出一次 log 的示例：
function log() {
console.log('Clicked!');
}
const btnEl = document.getElementById('click-button');
// 创建 throttle 函数，最多每 1 秒执行一次 log 函数
const throttledLog = _.throttle(log, 1000);
// 监听 click 事件，如果有点击则调用 throttledLog 函数
// 每当用户点击按钮时，我们会调用 `throttledLog` 函数，这个函数会通过限制函数的执行频率，保证每隔 1 秒钟输出一条日志。即使用户连续点击按钮，也只有第一次点击可以触发函数的执行，后续的点击都会被忽略
btnEl.addEventListener('click', (evt) => {
throttledLog();
});
所以，防抖和节流看似很像，很多人以为是一回事，其实不然。
原创文章，作者：guozi，如若转载，请注明出处：https://www.sudun.com/ask/90956.html
