你好同学，我是沐爸，欢迎点赞、收藏和关注！个人知乎
防抖在前端开发中可以说经常用到，有诸多使用场景。接下来我们一起看下防抖的定义、防抖函数的实现、应用场景、lodash防抖函数以及防抖在框架中的使用。Let’s go
一、什么是防抖？
什么是防抖？防抖技术确保函数在指定的时间间隔结束后才执行，如果在该间隔内有多次调用，则只会执行最后一次调用。
通俗点讲，以按钮点击为例，设置频率为1s，那么如果相邻两次的点击事件的时间间隔小于1s，理论上你可以一直点下去，点击要执行的函数永远不会触发；如果你只点了一次，或者两次点击的时间间隔大于等于1s，那么函数就会执行。
二、函数实现
function debounce(fn, wait) {let timeout = null;return function() {clearTimeout(timeout);timeout = setTimeout(() => {fn.apply(this, arguments);}, wait);};
}// 使用示例：方式一
window.addEventListener('resize', debounce(function() {console.log('窗口大小改变');
}, 200));// 使用示例：方式二
function onWindowResize() {console.log('窗口大小改变');
}
window.addEventListener('resize', debounce(onWindowResize, 200));
三、应用场景
1.搜索框输入
当用户在搜索框中键入时，通常希望在用户停止输入一定时间后再去请求搜索结果，以减少请求次数。
function onSearchInput() {console.log('搜索词:', this.value);
}const searchInput = document.querySelector('.search-input');
searchInput.addEventListener('input', debounce(onSearchInput, 300));
2.窗口调整大小
在用户调整浏览器窗口大小时，可能需要根据最终的尺寸执行一些操作，如重新计算布局或重新加载资源。
// 假设 myChart 是一个 ECharts 实例
const myChart = echarts.init(document.getElementById('myChart'));// 对图表进行初始化操作，如设置选项等
myChart.setOption(/* ... */);// 定义一个函数用于响应窗口大小变化
function onWindowResize() {myChart.resize(); // 调整图表尺寸以适应窗口大小
}// 使用防抖处理窗口调整大小事件
const debouncedResize = debounce(onWindowResize, 200);// 监听窗口调整大小事件
window.addEventListener('resize', debouncedResize);
3.表单验证
在用户填写表单时，可能希望在用户完成输入后进行验证，而不是每输入一个字符都进行验证。
function onFormInput() {// 执行表单验证逻辑console.log('输入内容验证');
}const formInput = document.querySelector('.form-input');
formInput.addEventListener('input', debounce(onFormInput, 500));
4.表单提交
防抖也经常会用于表单提交，用以限制用户手误导致的重复提交。
// 搜索函数
function handleSubmit() {console.log('执行搜索操作');// 执行搜索的逻辑
}// 将防抖应用于点击事件
const debouncedSubmit = debounce(handleSubmit, 300);// 给搜索按钮添加点击事件监听器
searchButton.addEventListener('click', debouncedSubmit);
5.键盘事件处理
在处理键盘事件，如连续按键时，防抖可以确保在用户停止按键后执行操作，如提交搜索查询。
function onKeyPress() {console.log('按键事件');
}document.addEventListener('keydown', debounce(onKeyPress, 100));
6.文件预览
在选择文件后，可能需要在用户停止选择文件一段时间后才加载预览，以避免在文件选择过程中占用过多资源。
function onFileSelected() {console.log('文件选择完成');// 加载文件预览或处理文件
}const fileInput = document.querySelector('.file-input');
fileInput.addEventListener('change', debounce(onFileSelected, 300));
四、lodash防抖函数
Lodash 是一个流行的 JavaScript 实用工具库，它提供了很多现成的函数式编程工具，包括防抖（debounce）功能。Lodash 的 debounce 方法可以非常方便地实现函数的防抖。
import _ from 'lodash';function performSearch(query) {console.log('搜索:', query);// 执行搜索逻辑
}
const debouncedSearch = _.debounce(performSearch, 300);const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', (event) => {debouncedSearch(event.target.value);
});
五、防抖在框架中的使用
Vue 2 中的防抖使用
在Vue 2中，你可以使用debounce函数结合watch属性来实现防抖：
import _ from 'lodash';export default {data() {return {searchQuery: ''}},watch: {// 使用防抖函数包装 watch 属性searchQuery: _.debounce(function (newValue) {console.log('搜索查询更新:', newValue);// 执行搜索逻辑}, 300)},methods: {// 其他方法...}
}
Vue 3 中的防抖使用
Vue 3 引入了Composition API，提供了更多的灵活性。对Vu2的例子进行改写：
import _ from 'lodash';
import { reactive, watch } from 'vue';const state = reactive({searchQuery: ''
});const debouncedSearch = debounce((newValue) => {console.log('搜索查询更新:', newValue);// 执行搜索逻辑
}, 300);watch(() => state.searchQuery, (newValue, oldValue) => {debouncedSearch(newValue);
});
React 中防抖的使用
1.函数组件使用防抖函数
假设我们有一个搜索框，我们想要在用户停止输入300毫秒后才执行搜索操作：
import React, { useState, useCallback } from 'react';
import _ from 'lodash'; // 引入Lodash库const SearchComponent = () => {const [searchTerm, setSearchTerm] = useState('');// 使用 useCallback 钩子来记忆化防抖函数const debouncedSearch = useCallback(_.debounce((term) => {console.log('搜索:', term);// 执行搜索逻辑}, 300),[]);const handleInputChange = (event) => {// 当输入改变时，更新状态并触发防抖函数setSearchTerm(event.target.value);debouncedSearch(event.target.value);};return (<inputtype="text"value={searchTerm}onChange={handleInputChange}placeholder="输入搜索内容"/>);
};export default SearchComponent;
2.类组件使用防抖函数
在类组件中，你可以在componentDidMount生命周期方法中设置事件监听器，并在componentWillUnmount中清除它们：
import React, { Component } from 'react';
import _ from 'lodash';class SearchComponent extends Component {constructor(props) {super(props);this.state = {searchTerm: '',};this.debouncedSearch = _.debounce(this.handleSearch, 300);}handleSearch = (term) => {console.log('搜索:', term);// 执行搜索逻辑};handleInputChange = (event) => {const term = event.target.value;this.setState({ searchTerm: term }, () => {this.debouncedSearch(term);});};componentDidMount() {// 如果需要绑定事件，可以在此处进行}componentWillUnmount() {// 清除防抖函数的定时器this.debouncedSearch.cancel();}render() {const { searchTerm } = this.state;return (<inputtype="text"value={searchTerm}onChange={this.handleInputChange}placeholder="输入搜索内容"/>);}
}export default SearchComponent;
希望今天的分享对你有所帮助，下期再见！