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

前端面试题:节流和防抖

节流和防抖都是通过降低事件执行的频率而达到节省资源的效果

节流

一段时间只执行一次,多少秒之后获取验证码、resize 事件和scroll 事件等

类似王者荣耀中的传送,一段时间内只能传送一次,具体实现如下:

function throttle(fn, delay) {let lastTime = 0;return function () {let currentTime = Date.now();if (currentTime - lastTime > delay) {lastTime = currentTime;fn.apply(this, arguments);}};
}

防抖

一段时间内连续触发事件,只执行最后一次,如搜索,手机号、邮箱地址的校验

类似王者荣耀中的回城操作,如果被打断则重新计时,不打断则执行最后一次操作。

代码实现如下:

function debounce(fn, delay) {let timer = null;return function () {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {fn.apply(this, arguments);}, delay);};
}

具体应用实现如下:

&

相关文章:

前端面试题:节流和防抖

节流和防抖都是通过降低事件执行的频率而达到节省资源的效果 节流 一段时间只执行一次,多少秒之后获取验证码、resize 事件和scroll 事件等 类似王者荣耀中的传送,一段时间内只能传送一次,具体实现如下: function throttle(fn, delay) {let lastTime = 0;return functi…...

网络工程师学习笔记——交换机路由器 数据传输

交换机和路由器是数据通信最核心,也是所有网工最熟悉的设备。今天学习:交换机%路由器数据传输过程。 目录 一、交换机 1、交换机原理 2、交换机数据传输过程 3、交换机基本原理配置命令 二、路由器 1、路由器原理 2、路由器数据传输过程 3、静态…...

【论文笔记】A Survey on 3D Gaussian Splatting

原文链接:https://arxiv.org/abs/2401.03890 1. 引言 NeRF在计算效率和可控性上具有局限性,这导致了3D高斯溅射(3D GS)的出现,重新定义了场景表达和渲染。 3D GS通过引入新的场景表达技术,用大量的3D高斯…...

项目实战————苍穹外卖(DAY11)

苍穹外卖-day11 课程内容 Apache ECharts 营业额统计 用户统计 订单统计 销量排名Top10 功能实现:数据统计 数据统计效果图: 1. Apache ECharts 1.1 介绍 Apache ECharts 是一款基于 Javascript 的数据可视化图表库,提供直观&#x…...

非常好用的Mac清理工具CleanMyMac X 4.14.7 如何取消您对CleanMyMac X的年度订购

CleanMyMac X 4.14.7是Mac平台上的一款非常著名同时非常好用的Mac清理工具。全方位扫描您的Mac系统,让垃圾无处藏身,您只需要轻松单击2次鼠标左键即可清理数G的垃圾,就这么简单。瞬间提升您Mac速度。 CleanMyMac X 4.14.7下载地址&#xff1a…...

【51单片机系列】proteus仿真单片机的串口通信

本文参考:https://zhuanlan.zhihu.com/p/425809292。 在proteus之外使用串口软件和单片机通信。通过在proteus设计一个单片机接收PC发送的数据,并将接收的数据发送出去,利用软件【Configure Virtual Serial Port Driver】创建一对虚拟串口&am…...

【Qt】对象树与坐标系

需要云服务器等云产品来学习Linux的同学可以移步/-->腾讯云<--/-->阿里云<--/-->华为云<--/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;新用户首次下单享超低折扣。 目录 一、Qt Creator快捷键 二、对象树 1、对象树的析构 2、自定义类的编写…...

【设计模式】腾讯二面:自动贩卖机/音频播放器使用了什么设计模式?

状态模式是什么&#xff1f; 状态模式&#xff0c;也被称作状态对象模式&#xff0c;是一种行为设计模式。 当一个对象的内在状态改变时&#xff0c;允许改变其行为&#xff0c;这个对象看起来像是改变了其类。 它让对象在其内部状态改变时改变自己的行为。外部调用者无需了…...

转换操作符转换类型:普通函数指针(普通函数、类的静态函数)、类的成员函数指针

一、转换操作符的定义 转换操作符是一种特殊的类成员函数 &#xff0c;它定义将类类型值转变为其他类型值的转换&#xff0c;转换操作符在类定义体内声明&#xff0c;在保留字operator之后跟着转换的目标类型&#xff0c;转换函数采用如下通用形式&#xff1a; operator type(…...

易控智驾高精度地图开发工程师校招一面、二面面经

本文介绍2024届秋招中&#xff0c;北京易控智驾科技有限公司的高精度地图开发工程师岗位的2场面试基本情况、提问问题等。 12月投递了北京易控智驾科技有限公司的高精度地图开发工程师岗位&#xff0c;所在部门暂不清楚。目前完成了一面、二面流程&#xff0c;在这里记录一下2场…...

用VSCode玩STM32的烧录工具 CooCox Cortex Flash Programmer

一、下载软件 经热心兄弟推荐的版本&#xff0c;不知道有没有版权&#xff0c;如有版权问题&#xff0c;请通知删除。 CSDN - 0积分下载&#xff1a;https://download.csdn.net/download/qq_49053936/88744187 二、生成bin文件 插件不同&#xff0c;方法有所不同&#xff0c;各…...

Pycharm无法刷新远程解释器的框架: Can‘t get remote credentials for deployment server

在Pycharm上部署项目到远程服务器&#xff0c;有时候需要启动SSH会话&#xff0c;启动的时候发现没反应&#xff0c;且事件日志显示&#xff1a;无法刷新远程解释器的框架: Can’t get remote credentials for deployment server 观察pycharm界面最下边&#xff0c;发现“无默…...

c++设计模式之单例模式

介绍 一个类无论创建多少对象&#xff0c;都只能得到一个实例 A* p1new A(); A* p2new A(); A* p3new A(); 如上述代码中&#xff0c;我们通过new运算符创建出了类A的三个对象实例&#xff0c;而我们现在要做的是&#xff0c;如何设计类A&#xff0c;使得上述代码运行之后永远…...

Git学习笔记(第5章):Git团队协作机制

目录 5.1 团队内协作 5.2 跨团队协作 Git进行版本控制都是在本地库操作的。若想使用Git进行团队协作&#xff0c;就必须借助代码托管中心。 5.1 团队内协作 问题引入&#xff1a;成员1&#xff08;大佬&#xff09;利用Git在宿主机上初始化本地库&#xff0c;完成代码的整体…...

Python 面向对象绘图(Matplotlib篇-16)

Python 面向对象绘图(Matplotlib篇-16)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ�…...

Linux开机自动挂载window密码有转义字符的共享文件夹

项目上遇到需要自动挂载windows共享盘到linux系统中&#xff0c;由于windows密码有英文逗号(,)&#xff0c;被linux识别成了参数分隔符&#xff0c;在网上找了很多办法都不行&#xff0c;后来通过这种方式完美解决&#xff0c;linux系统是centos8.4文章阅读操作时间在5分钟左右…...

Redis(四)

1、Redis的单/多线程 1.1、单线程 其实直接说Redis什么单线程或者是多线程&#xff0c;不太准确&#xff0c;在redis的4.0版主之前是单线程&#xff0c;然后在之后的版本中redis的渐渐改为多线程。 Redis是单线程主要是指Redis的网络IO和键值对读写是由一个线程来完成的&#…...

一文解读ISO26262安全标准:术语

一文解读ISO26262安全标准&#xff1a;术语 做汽车行业的人&#xff0c;都知道安全标准ISO26262&#xff0c;但是仔细说说它到底讲的是什么&#xff1f;好像又说不出来&#xff0c;这是个玄之又玄的话题&#xff0c;笔者试图将这份标准以简明扼要、并且容易理解的形式梳理出来&…...

使用stable diffussion插件StableSR将图片高清放大

一&#xff1a;需要安装的插件 1、StableSR&#xff0c;项目地址&#xff1a;https://github.com/pkuliyi2015/sd-webui-stablesr 不过国内没什么用&#xff0c;访问不了&#xff0c;可以用下面的国内镜像&#xff1a; https://gitee.com/han51535/sd-webui-stablesr.git 这…...

ActiveMQ:专注消息传递,助您构建高效稳定的系统

在数字化世界的今天&#xff0c;应用程序和系统之间的通信变得日益重要&#xff0c;为了确保数据能够在不同的服务和组件之间高效、可靠地传输&#xff0c;消息队列技术应运而生。 Apache ActiveMQ 作为一种流行的开源消息队列技术&#xff0c;为企业级应用提供了强大的支持&am…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...