JS防抖是什么?干嘛用的?
你好同学,我是沐爸,欢迎点赞、收藏和关注!个人知乎
防抖在前端开发中可以说经常用到,有诸多使用场景。接下来我们一起看下防抖的定义、防抖函数的实现、应用场景、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;
希望今天的分享对你有所帮助,下期再见!
相关文章:
JS防抖是什么?干嘛用的?
你好同学,我是沐爸,欢迎点赞、收藏和关注!个人知乎 防抖在前端开发中可以说经常用到,有诸多使用场景。接下来我们一起看下防抖的定义、防抖函数的实现、应用场景、lodash防抖函数以及防抖在框架中的使用。Let’s go 一、什么是防…...
Linux磁盘管理与文件系统(二):实用工具和命令、fdisk分区示例
文章目录 4、查看或管理磁盘分区-fdisk格式选项示例 4、示例:使用 fdisk 命令创建分区需求操作步骤 5、创建文件系统-mkfs格式常用选项示例创建其他类型的文件系统 6、创建文件系统-mkswap格式常用选项示例拓展:关闭和启用交换分区拓展:swap分…...
使用vtkRenderer创建的显示点云的窗口如何刷新(QT/C++)
一、使用vtkRenderer创建点云显示窗口,参考 在Qt创建的UI中放一个显示点云的窗口(PCLQT5)_pcl点云和qt-CSDN博客 二、刷新vtkRenderer创建的窗口 使用场景:在某些情况下代码中需要对显示窗口的显示物改动,例如通过滑…...
Mysql绕过小技巧
上源码。 <?php $mysqli new mysqli("localhost", "root", "root", "security");/* check connection */ if ($mysqli->connect_errno) {printf("Connect failed: %s\n", $mysqli->connect_error);exit(); }$my…...
气象大数据案例项目(求各气象站的平均气温)
气象大数据案例项目(求各气象站的平均气温) 一、项目需求二、数据格式三、项目开发3.1 在windows 进行开发3.2 运行结果3.3 对项目打包 一、项目需求 现在有一份来自美国国家海洋和大气管理局的数据集,里面包含近30年每个气象站、每小时的天…...
博客摘录「 一个ModBus RTU程序(支持01、02、03、05、06、15、16功能码)」2024年4月19日
发送数据最好改为中断模式,不然通信速度不够。...
Vue3学习笔记第一天
MVVM Vue是一种用于构建用户界面的JavaScript框架。MVVM 是Vue采用的一种软件架构模式,用于构建交互式的用户界面。它的全称是 Model-View-ViewModel,这三个部分分别代表了应用程序的不同层次和角色: Model(模型)&…...
C++之类与对象(完结撒花篇)
目录 前言 1.再探构造函数 2.类型转换 3.static成员 4. 友元 5.内部类 6.匿名对象 7.对象拷贝时的编译器优化 结束语 前言 在前面的博客中,我们对类的默认成员函数都有了一定了解,同时实现了一个日期类对所学的没内容进行扩展延伸,本…...
代码质量的守护者:Python静态代码分析工具的集成之道
标题:代码质量的守护者:Python静态代码分析工具的集成之道 在软件开发过程中,代码质量是至关重要的一环。Python作为一种流行的编程语言,拥有众多的静态代码分析工具,它们能够在代码运行之前检测潜在的错误和代码风格…...
JVM -- 类加载器
类加载器(ClassLoader)是Java虚拟机提供给应用程序去实现访问接口和类字节码数据的技术。类加载器只负责加载过程中的字节码获取并加载到内存的这一过程。 一、 类加载器的分类 类加载器的详细信息可以使用Arthas通过classloader命令查看: 1.启动类加载器(Boots…...
OLAP引擎之StarRocks
StarRocks 是一款新兴的开源分布式实时分析型数据库,专为高性能、高并发的数据分析场景设计。它结合了传统数据仓库和大数据技术的优势,提供了强大的实时数据处理和分析能力。以下是对 StarRocks 的详细介绍,涵盖其基本概念、核心特性、架构设…...
基于微信小程序的小区业主服务系统(源码+论文+部署讲解等)
博主介绍:✌全网粉丝10W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术栈介绍:我是程序员阿龙ÿ…...
C++ | Leetcode C++题解之第327题区间和的个数
题目: 题解: class Solution { public:int countRangeSumRecursive(vector<long>& sum, int lower, int upper, int left, int right) {if (left right) {return 0;} else {int mid (left right) / 2;int n1 countRangeSumRecursive(sum,…...
C# Winform 多窗体切换方式一
一、简介 在 Winform 开发中,多窗体的切换是一个常见的需求,比如登录成功后,切换至主界面,在网上查阅相关的资料,你会发现很多都是用 form2.Show(); this.Hide(); 这种方式,这种方式也存在一些问题&#…...
笔记本CPU天梯图(2024年8月),含AMD/骁龙等新CPU
原文地址(高清无水印原图/持续更新/含榜单出处链接): 2024年8月笔记本CPU天梯图 2024年8月笔记本CPU天梯图 2024年8月5日更新日志:常规更新Cinebench R23、PassMark笔记本CPU天梯图,新增Geekbench 6.2单核多核天梯图&…...
GitLab-CI/CD指南
由于公司没有运维,写go服务时各个环境编译部署还是略显麻烦,由于代码管理使用的是 gitlab,所以决定使用 gitlab 自带的 CI/CD 来做自动编译和部署,这样每次提交代码以后就可以自动部署到服务器上了。 gitlab 本身只有 CI/CD 的接…...
io目录操作学习
1、基本概念 目录也是一种文件,因此操作流程与普通文件类似,有诸如打开、关闭、定位等概念,但目录是一种特殊的文件,目录存储的数据的最小单位并不是字符,而是目录项。这使得目录跟普通文件又有区别。 在Linux中&…...
Ant-Design-Vue
Ant-Design-Vue是蚂蚁金服Ant Design官方推荐的Vue版UI组件库,它继承了Ant Design的设计语言和Vue.js的易用性,为开发者提供了丰富、高质量的Vue组件,极大地简化了前端开发流程。以下是一份详细的Ant-Design-Vue快速上手指南及排坑建议&#…...
2024互联网暑期实习面经和流程记录分享
2024互联网暑期实习面经和流程记录分享 面试经验和流程需要注意的点 面试经验和流程 因为敏感信息的原因,这里涉及到公司名字的全部进行打码 笔者投递和面试了很多公司,具体有包括算法和开发岗,下面的公司一律用字母代替。 O公司࿰…...
风云崛起之拉氏变换和拉式逆变换
图像的分割写出来了,但是写的不好,暂时先不发了。这两天小y想在把拉式变换的内容写出来,小y最近再看信号和电路,需要复习数学,所以把这点写出来。 首先要推出分布积分的公式,我们知道积分和微分为逆运算&am…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral(热门工具 Ruff 的开发者)推出的下一代高性能 Python 包管理器和构建工具,用 Rust 编写。它旨在解决传统工具(如 pip、virtualenv、pip-tools)的性能瓶颈,同时…...
NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中,车辆不再仅仅是传统的交通工具,而是逐步演变为高度智能的移动终端。这一转变的核心支撑,来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒(T-Box)方案:NXP S32K146 与…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时,Again增益0db变化为6DB,画面的变化只有2倍DN的增益,比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析: 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
