很多时候,我们都会觉得防抖和节流是一回事,其实不然,他们还是有很大区别的。
首先说防抖,当一个按钮,你拼命点击,我就不处理,等你什么时候消停了,我取你最后一次点击作为有效的,然后请求后台接口,这个就是防抖。
实际开发中,我们直接使用 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/90948.html