当前位置: 首页 > news >正文

【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();

文章借鉴:

  1. ChatGPT4
  2. 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.定义链表类&#xff0c;并实现Append、Print、MoveFirst、 Insert 3.Main方法 1.定义一个泛型节点类并自动属性 /// <summary> /// 定义泛型节点类 /// </summary> /// <typeparam name"T">泛型运算符&…...

10-Java装饰器模式 ( Decorator Pattern )

Java装饰器模式 摘要实现范例 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其结构 装饰器模式创建了一个装饰类&#xff0c;用来包装原有的类&#xff0c;并在保持类方法签名完整性的前提下&#xff0c;提供…...

Vue.js 实用技巧:深入理解 Vue.set 方法

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

单词规律00

题目链接 单词规律 题目描述 注意点 pattern只包含小写英文字母s只包含小写英文字母和 ’ ’s不包含任何前导或尾随对空格s中每个单词都被 单个空格 分隔 解答思路 本题与上一次同构字符串类似&#xff0c;思路可以参照同构字符串 代码 class Solution {public boolean …...

vue3 vite项目一运行就401(Unauthorized)

问题&#xff1a;项目一执行&#xff1a; pnpm run dev, 启动就出错&#xff0c; Failed to load resource: the server responded with a status of 401 (Unauthorized) 分析&#xff1a; 项目之前是正常运行的&#xff0c;没有问题&#xff0c;回溯刚刚改动&#xff0c;还原…...

LeetCode102.二叉树的层序遍历

题目 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[9,20],[15,7]]输入&#xff1a;root [1] 输出&am…...

Java底层自学大纲_JVM篇

JVM专题_自学大纲所属类别学习主题建议课时&#xff08;h&#xff09; A 深入理解Java虚拟机001 JVM类加载器设计原理2.5 A 深入理解Java虚拟机002 基于SPI破解双亲委派机制2.5 A 深入理解Java虚拟机003 JVM内部结构分析2.5 A 深入理解Java虚拟机004 字符串常量池原理2.5 …...

数据可视化?这些平台能处

图表在各行各业都起到举重若轻的作用&#xff0c;无论是项目汇报、业绩分析&#xff0c;亦或是数据挖掘、统计分析&#xff0c;良好的可视化可以为我们的阐述起到画龙点睛的效果。在一篇文章中&#xff0c;如果只有密密麻麻的文字堆积&#xff0c;无论是谁恐怕都无法长期保持注…...

[ai笔记14] 周鸿祎的ai公开课笔记1

欢迎来到文思源想的ai空间&#xff0c;这是技术老兵重学ai以及成长思考的第14篇分享&#xff01; 本周二月的最后一周&#xff0c;并不是闲下来了&#xff0c;反而是开始进行一些更多的深入实践&#xff0c;关于gpt的主体架构、关于prompt&#xff0c;同时也看了不少书和直播&…...

在Linux系统中创建新用户并登录

1 创建新用户&#xff08;使用 useradd 或 adduser 命令&#xff09; 使用 useradd 命令&#xff08;不带交互式选项&#xff09;创建新用户&#xff0c;同时默认会在 /home 目录下创建同名目录作为家目录&#xff1a; sudo useradd -m 新用户名在执行上述命令后&#xff0c;…...

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&#xff08;相关工作 2.1 Spatial-temporal Forecasting&#xff08;时空预测 2.2 Spatial-temporal Forecasting withIncomplete Data&#xff08;不完全数据的时空预测 2.3 Graph Contrastive Learn…...

3大核心技术突破语言壁垒:LunaTranslator高效视觉小说翻译解决方案

3大核心技术突破语言壁垒&#xff1a;LunaTranslator高效视觉小说翻译解决方案 【免费下载链接】LunaTranslator 视觉小说翻译器 / Visual Novel Translator 项目地址: https://gitcode.com/GitHub_Trending/lu/LunaTranslator 在全球化游戏市场中&#xff0c;语言差异往…...

3MF插件全面指南:打造高效3D打印工作流

3MF插件全面指南&#xff1a;打造高效3D打印工作流 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 3MF插件是Blender中实现3D打印工作流的重要工具&#xff0c;它能帮助用…...

SEO_资深专家分享SEO内容优化的核心方法

SEO内容优化的核心方法&#xff1a;资深专家分享 在当今竞争激烈的互联网时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;已经成为提升网站流量和品牌知名度的关键。资深专家在SEO领域积累了丰富的经验&#xff0c;他们提出了许多实用的方法来优化内容。本文将详细探…...

效率提升利器:用快马AI生成批量域名健康检查工具,告别手动刷新

效率提升利器&#xff1a;用快马AI生成批量域名健康检查工具&#xff0c;告别手动刷新 作为开发者或运维人员&#xff0c;我们经常需要监控一批服务域名的健康状态。比如最近公司新上线了一批jxx相关的域名&#xff0c;需要定期检查它们的可用性和响应速度。传统的手动刷新浏览…...

KuiklyUI未来展望:2025路线图与技术演进趋势

KuiklyUI未来展望&#xff1a;2025路线图与技术演进趋势 【免费下载链接】KuiklyUI A Kotlin Multiplatform UI framework from Tencent TDS — high-performance, one codebase for six platforms, with dynamic delivery. 项目地址: https://gitcode.com/gh_mirrors/ku/Kui…...

文件 IO

目录 一. 文件 1.1 文件的概念 1.2 文件目录 1.3 文件路径 1.3.1 绝对路径 1.3.2 相对路径 1.4 文件的类型 二. IO 2.1 文件系统操作-- File类 2.1.1 File类的构造方法 2.1.2 File类中的方法 2.2 文件内容操作 2.2.1 字节流 2.2.1.1 InputStream中的方法 2.2.1.2…...

3步驯服锐龙:RyzenAdj性能调校实战指南

3步驯服锐龙&#xff1a;RyzenAdj性能调校实战指南 【免费下载链接】RyzenAdj Adjust power management settings for Ryzen APUs 项目地址: https://gitcode.com/gh_mirrors/ry/RyzenAdj 问题诊断&#xff1a;你的锐龙处理器是否被"封印"&#xff1f; 场景一…...

CLI 的复兴与应用

CLI 的爆发与定义CLI&#xff08;Command Line Interface&#xff0c;命令行界面&#xff09;作为计算机领域古老的交互方式&#xff0c;近期迎来新爆发。飞书、钉钉、谷歌、Stripe 等公司在两周内陆续开源 CLI 产品&#xff0c;越来越多软件转向 CLI 化。CLI 与 GUI 的区别GUI…...

玩转哔哩哔哩视频下载:3分钟掌握DownKyi的高效秘籍

玩转哔哩哔哩视频下载&#xff1a;3分钟掌握DownKyi的高效秘籍 【免费下载链接】downkyi 哔哩下载姬downkyi&#xff0c;哔哩哔哩网站视频下载工具&#xff0c;支持批量下载&#xff0c;支持8K、HDR、杜比视界&#xff0c;提供工具箱&#xff08;音视频提取、去水印等&#xff…...

别再为AI芯片的模拟前端发愁了!手把手教你用Cadence Virtuoso搞定7nm共源共栅放大器设计

7nm共源共栅放大器实战&#xff1a;从Cadence Virtuoso到AI加速器集成 在AI芯片设计的竞技场中&#xff0c;模拟前端电路如同短跑运动员的起跑器——微小的性能差异将直接影响整个系统的冲刺速度。当我们面对7nm工艺下低至0.8V的电源电压时&#xff0c;传统放大器设计方法就像穿…...