当前位置: 首页 > 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…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...