【JavaScript】面试手撕防抖
引入
防抖可是前端面试时最频繁考察的知识点了,首先,我们先了解防抖的概念是什么。咳咳。👀
防抖:
首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容改变等。在用户连续快速地触发同一事件时,防抖机制会确保相关回调函数在一个时间间隔内只会被执行一次。
我们可以归纳为如下:
- 当事件触发时,相应的函数不会被立即触发,而是会被推迟执行。
- 当事件连续密集触发时,函数的触发会被一直推迟。
- 只有当等待一段时间后也没有再次触发该事件,那么才会真正执行响应函数。
了解防抖概念之后,接下来就是使用场景了,面试官非常喜欢追问如下问题
你知道在什么情况下我们需要使用防抖,请结合自己平常研发的感悟谈谈
PS: 兄弟们呐,难道面试官不知道我们前端大多数时候都在切图吗?防抖这种技术虽然谈不上是造🚀,但至少不是拧🔩的活。真不瞒您说,我观察一个项目,看到很多地方用到防抖,我就知道这个开发者的水平还是蛮不错的。
虽然大家很多时候防抖用的比较少,但是此时此刻怎能掉链子呢?大家背也要背几个例子,江湖救急!
防抖例子
这里我举两个常见的🌰,大家有什么更好的🌰可以在评论里回复
输入框输入提示
我不知道大家有没有做过下面这样的需求,我们在Table的表格里输入要搜索的标题,这个时候我们输入一部分,后端就会根据这个标题返回匹配的数组。类似于我们使用百度搜索一样
例如上面例子所示,我们不能每次检测到输入就向后端发起请求,如果碰到了键盘手,凭借着他的超快手速,很有可能直接把我们的后端服务干崩(其实准确的说,应该不存在这样天赋异禀者🐶)。所以我们要等用户停止输入一会时间后才发起查询(大概100ms)左右。
表单提交验证
其实我们日常的表单采用的也是防抖的原理。比如校验邮箱格式,可以通过防抖来避免用户每输入一个字符就进行一次验证,而是在最后一次输入后的短暂停顿后才执行验证函数。很多UI框架也是采用这样的思路,从而减小计算的性能消耗和提升用户体验度。
手写防抖
面试官听完你介绍完了防抖概念,并且听你将防抖例子讲的有声有色时,于是笑眯眯地看着你。由于我们这样的面试者经过了很多次面试的专业训练,大概知道面试官下一句是要问什么呢。这个时候你来一句
面试官,我是不是要手写下防抖函数呢?
听到此,面试官笑意更甚,心想真是孺子可教也,还学会抢答了,🐮的🐮的。
基础版防抖函数
牛刀小试,写一个基础版的防抖函数练练手。
// 基本版防抖函数(不支持立即执行)
// 第一个参数是需要进行防抖处理的函数,第二个参数是延迟时间
function debounce(func, delay) {let time; // 创建一个变量用于保存计时器// 防抖函数返回的是另外一个函数,该函数才是被调用的函数return function(...args) {// 如果存在定时器则清除它if (time){clearTimeout(time); }// 重新设置一个新的定时器,当延迟时间过后执行真正的回调函数time = setTimeout(() => {func.apply(this, args); // 使用apply确保上下文和参数正确传递给回调函数}, delay);};
}// 使用防抖函数
const myDebouncedFunction = debounce(function(inputValue) {console.log('Input value after debounce:', inputValue);
}, 500); // 设置延时为500毫秒// 假设这是绑定了input元素的onChange事件
document.getElementById('myInput').addEventListener('input', function(event) {myDebouncedFunction(event.target.value);
});
首次触发立即执行防抖函数
写完基础版防抖函数的你大松一口气,突然对面的面试官笑意再次加强,既然你写的这么快,离结束还有蛮多时间的,不如你就再写一个首次触发立即执行的防抖函数吧?
其实代码也好理解,用一个额外的参数immediate来控制这个行为即可。
// 支持立即执行的防抖函数
// 支持立即执行的防抖函数
function debounce(fn, delay, immediate = false) {let time;// 使用callNow闭包变量用来记录是否立即执行, 默认为falselet callNow = false;return function (...args) {if (time) clearTimeout(time);// 当是第一次触发,并且需要触发第一次事件if (immediate && !callNow) {fn.apply(this, args);// callNow设置为true,这样不会影响到后面频繁触发的函数调用callNow = true;} else {time = setTimeout(() => {fn.apply(this, args);// 当定时器里的函数执行时,也就是说是频繁触发事件的最后一次事件// 将callNow设置为false,这样下一次的第一次触发事件才能被立即执行callNow = false;}, delay);}};
}// 使用防抖函数
const myDebouncedFunction = debounce(function (inputValue) {console.log("Input value after debounce:", inputValue);},1000,true
); // 设置延时为1秒const waitTime = async () => {return new Promise((resolve) => {setTimeout(() => {resolve();}, 1100);});
};// 等待1.1s这样刚好触发防抖函数的回调const main = async () => {myDebouncedFunction(1);await waitTime();myDebouncedFunction(1);await waitTime();myDebouncedFunction(1);
};main();
文章借鉴:
ChatGPT4- JS手写题-防抖-节流
最后向他们表示感谢🙏。
相关文章:
【JavaScript】面试手撕防抖
引入 防抖可是前端面试时最频繁考察的知识点了,首先,我们先了解防抖的概念是什么。咳咳。👀 防抖: 首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容…...
【Kubernetes】K3S
目录 前言一、原理单体架构高可用架构 二、初始化1.配置yum源2.关掉防火墙3.关掉selinux4. 修改内核参数5.关掉swap交换分区 三、安装master节点1. 安装container2.启动master服务 四、安装node节点五、卸载六、总结 前言 各位小伙伴们,大家好,小涛又来…...
Docker实战——容器
目录 Docker 容器的基本概念与操作1.使用“docker create”创建容器。这里基于Nginx的镜像创建了一个容器,名字为mycontainer。2.使用“docker ps -a”命令查看所有的容器,这时的容器不一定是运行状态。3.使用 “docker start” 命令可以启动容器。4.使用…...
亚信安慧AntDB开启超融合数据库新纪元
(一) 前言 据统计,在信息化时代的今天,人们一天所接触到的信息量,是古人一辈子所能接收到的信息量的总和。当今社会中除了信息量“多”以外,人们对信息处理的“效率”和“速度”的要求也越来越高。譬如&…...
数学建模【多元线性回归模型】
一、多元线性回归模型简介 回归分析是数据分析中最基础也是最重要的分析工具,绝大多数的数据分析问题,都可以使用回归的思想来解决。回归分析的任务就是,通过研究自变量X和因变量Y的相关关系,尝试去解释Y的形成机制,进…...
【 10X summary report】怎么看?详细解读笔记
报告内容 在开始正式的分析之前,需要查看在对齐和计数过程中生成的任何总结统计信息。下图是由Cell Ranger工具创建的10X总结报告,在从10X scRNA-seq实验生成计数矩阵时会生成。 The left half of the report describes sequencing and mapping statist…...
K8S—Pod控制器
目录 1.什么是POD控制器 2.POD控制器有几种类型 3.POD与控制器之间的关系 4.示例 4.1 Deployment 4.2 SatefulSet ①为什么要有headless? ②为什么要有volumeClainTemplate? ③服务发现:就是应用服务之间相互定位的过程。 ④K8S里服…...
LabVIEW石油钻机提升系统数字孪生技术
LabVIEW石油钻机提升系统数字孪生技术 随着数字化、信息化、智能化的发展,石油钻采过程中的石油钻机数字化技术提升成为了提高钻井效率、降低生产成本的重要途径。基于中石油云平台提供的数据,采用数字孪生技术,对石油钻机提升系统进行数字化…...
C#双向链表实现:在当前节点后插入新数据的方法Insert()
目录 1.定义一个泛型节点类并自动属性 2.定义链表类,并实现Append、Print、MoveFirst、 Insert 3.Main方法 1.定义一个泛型节点类并自动属性 /// <summary> /// 定义泛型节点类 /// </summary> /// <typeparam name"T">泛型运算符&…...
10-Java装饰器模式 ( Decorator Pattern )
Java装饰器模式 摘要实现范例 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构 装饰器模式创建了一个装饰类,用来包装原有的类,并在保持类方法签名完整性的前提下,提供…...
Vue.js 实用技巧:深入理解 Vue.set 方法
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...
单词规律00
题目链接 单词规律 题目描述 注意点 pattern只包含小写英文字母s只包含小写英文字母和 ’ ’s不包含任何前导或尾随对空格s中每个单词都被 单个空格 分隔 解答思路 本题与上一次同构字符串类似,思路可以参照同构字符串 代码 class Solution {public boolean …...
vue3 vite项目一运行就401(Unauthorized)
问题:项目一执行: pnpm run dev, 启动就出错, Failed to load resource: the server responded with a status of 401 (Unauthorized) 分析: 项目之前是正常运行的,没有问题,回溯刚刚改动,还原…...
LeetCode102.二叉树的层序遍历
题目 给你二叉树的根节点 root ,返回其节点值的 层序遍历 。 (即逐层地,从左到右访问所有节点)。 示例 输入:root [3,9,20,null,null,15,7] 输出:[[3],[9,20],[15,7]]输入:root [1] 输出&am…...
Java底层自学大纲_JVM篇
JVM专题_自学大纲所属类别学习主题建议课时(h) A 深入理解Java虚拟机001 JVM类加载器设计原理2.5 A 深入理解Java虚拟机002 基于SPI破解双亲委派机制2.5 A 深入理解Java虚拟机003 JVM内部结构分析2.5 A 深入理解Java虚拟机004 字符串常量池原理2.5 …...
数据可视化?这些平台能处
图表在各行各业都起到举重若轻的作用,无论是项目汇报、业绩分析,亦或是数据挖掘、统计分析,良好的可视化可以为我们的阐述起到画龙点睛的效果。在一篇文章中,如果只有密密麻麻的文字堆积,无论是谁恐怕都无法长期保持注…...
[ai笔记14] 周鸿祎的ai公开课笔记1
欢迎来到文思源想的ai空间,这是技术老兵重学ai以及成长思考的第14篇分享! 本周二月的最后一周,并不是闲下来了,反而是开始进行一些更多的深入实践,关于gpt的主体架构、关于prompt,同时也看了不少书和直播&…...
在Linux系统中创建新用户并登录
1 创建新用户(使用 useradd 或 adduser 命令) 使用 useradd 命令(不带交互式选项)创建新用户,同时默认会在 /home 目录下创建同名目录作为家目录: sudo useradd -m 新用户名在执行上述命令后,…...
Vue.js+SpringBoot开发高校实验室管理系统
目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 实验室类型模块2.2 实验室模块2.3 实验管理模块2.4 实验设备模块2.5 实验订单模块 三、系统设计3.1 用例设计3.2 数据库设计 四、系统展示五、样例代码5.1 查询实验室设备5.2 实验放号5.3 实验预定 六、免责说明 一、摘…...
文献阅读笔记《Spatial-temporal Forecasting for Regions without Observations》13页
目录 目录 目录 发行刊物 ABSTRACT 1 INTRODUCTION 2 RELATED WORK(相关工作 2.1 Spatial-temporal Forecasting(时空预测 2.2 Spatial-temporal Forecasting withIncomplete Data(不完全数据的时空预测 2.3 Graph Contrastive Learn…...
ZygiskFrida:安卓逆向的Zygote层动态插桩新范式
1. 这不是“又一个 Frida 模块”,而是安卓逆向工作流的物理层重构你有没有过这样的经历:在一台已 root 的测试机上,想用 Frida hook 一个刚启动的系统服务,结果发现frida-server启动失败,报错Permission denied&#x…...
【Claude学术写作辅助应用】:教育部新文科AI赋能白皮书唯一推荐工具,附12所双一流高校实证数据
更多请点击: https://intelliparadigm.com 第一章:Claude学术写作辅助应用的政策定位与战略价值 Claude作为新一代大语言模型,在学术写作辅助领域已超越工具属性,成为支撑国家科研诚信建设、高等教育数字化转型与国际学术话语权提…...
SMGI框架:通用人工智能的结构元模型与实现路径解析
1. 项目概述:从“智能拼图”到“统一蓝图”最近几年,AI领域的热词层出不穷,从大语言模型到多模态,再到通用人工智能(AGI),大家似乎都在朝着同一个方向狂奔,但脚下的路却千差万别。这…...
Windows设备管理器报‘代码43’导致HDMI无输出?保姆级排查与修复指南(附原理)
Windows设备管理器报‘代码43’导致HDMI无输出?保姆级排查与修复指南(附原理)当你正准备进行一场重要的演示,或是沉浸在游戏世界中时,突然发现外接显示器黑屏无信号,设备管理器显示"Windows已停止该设…...
别光背公式了!用Python的NumPy和SciPy手把手带你玩转SVD(附实战代码与可视化)
别光背公式了!用Python的NumPy和SciPy手把手带你玩转SVD(附实战代码与可视化)在数据科学和机器学习领域,奇异值分解(SVD)就像一把瑞士军刀——它可能不是你每天都会用到的工具,但当遇到棘手问题…...
视觉着陆系统预测不确定性:从亚像素回归到RAIM完整性监测
1. 项目概述:当视觉着陆系统学会“自我怀疑”在自动驾驶汽车和无人机领域,基于视觉的导航早已不是新鲜事。但当场景切换到载人航空器,尤其是飞机着陆这个“一锤子买卖”上,事情就变得截然不同了。这里没有“容错率”这个词&#x…...
别再只跑模型了!用FAD、NDB、JSD给你的AI生成声音打个分(Python实战避坑)
用FAD、NDB、JSD给你的AI生成声音打个分(Python实战避坑指南)当你在深夜终于调试完最后一个神经网络层,按下生成按钮听到第一段AI合成的声音时,那种成就感无与伦比。但很快,一个更棘手的问题出现了:这段声音…...
【企业级AI Agent操作安全白皮书】:基于ISO/IEC 27001与NIST AI RMF的6类操作审计红线
更多请点击: https://codechina.net 第一章:AI Agent自主操作软件的定义与安全治理边界 AI Agent自主操作软件是指具备感知环境、规划决策、调用工具(如API、CLI、GUI自动化接口)并闭环执行任务能力的智能体系统。其核心特征在于…...
数据标注中的权力博弈与主观性:从规则制定到模型偏见的全链路解析
1. 项目概述:当数据标注不再是“客观”的技术活“数据标注”,在很多人眼里,可能就是一个坐在电脑前,对着图片画框、打标签的“体力活”或“技术活”。它听起来中立、客观,是人工智能模型训练前一道标准化的工序。然而&…...
【Lovable高阶开发者私藏技巧】:绕过平台限制实现自定义CSS/JS注入与第三方SDK深度对接
更多请点击: https://kaifayun.com 第一章:Lovable无代码开发教程 Lovable 是一款面向业务人员与轻量级开发者的可视化应用构建平台,它通过拖拽式界面、逻辑编排画布和内置数据连接器,将复杂功能封装为可复用的模块。无需编写传统…...
