Js面试之防抖与节流

Js面试之防抖与节流

  • 防抖
  • 节流
  • 二者区别
    • 触发方式不同
    • 执行时间点不同
  • 适用场景不同

最近在整理一些前端面试中经常被问到的问题,分为vue相关、react相关、js相关、react相关等等专题,可持续关注后续内容,会不断进行整理~

防抖(Debounce)和节流(Throttle)是两种常见的 JavaScript 性能优化技巧,主要用于限制某个函数的执行频率,以避免过度频繁地触发。

防抖

防抖的基本思想是将多个连续的函数调用合并成一次单一的函数调用。具体实现方式是设置一个定时器,在指定的时间间隔内,如果有新的函数调用触发,则清除之前的定时器并重新设置。这样,只有当函数调用的间隔大于设定的时间间隔时,函数才会被执行。

function debounce(func, delay) {let timer;return function (...args) {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, args);}, delay);};
}// 使用
const debouncedFunction = debounce(() => {console.log('Debounced function is executed');
}, 200);// 在需要防抖的地方调用debouncedFunction

节流

节流的基本思想是规定一个单位时间,在这个单位时间内,只能执行一次函数。如果在该单位时间内触发了多次函数调用,只有一次会被执行,其他会被忽略。

function throttle(func, delay) {let lastExecTime = 0;return function (...args) {const now = Date.now();if (now - lastExecTime >= delay) {func.apply(this, args);lastExecTime = now;}};
}// 使用
const throttledFunction = throttle(() => {console.log('Throttled function is executed');
}, 200);// 在需要节流的地方调用throttledFunction

二者区别

触发方式不同

  • 防抖是在最后一次函数调用后经过一段时间才执行。
  • 节流是每隔一段时间执行一次函数。

执行时间点不同

  • 防抖在最后一次函数调用后经过一定时间执行。
  • 节流是在每个单位时间内的第一次调用执行。

适用场景不同

  • 防抖适用于用户输入(例如搜索框),避免连续快速触发导致频繁请求。
  • 节流适用于高频事件(例如滚动、拖拽),确保一定时间内只执行一次,控制函数的执行频率。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/632770.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM工作原理与实战(十九):运行时数据区-方法区

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、运行时数据区 二、方法区 1.方法区介绍 2.方法区在Java虚拟机的实现 3.类的元信息 4.运行时常量池 5.字符串常量池 6.静态变量的存储 总结 前言 JVM作为Java程序的运行环境…

App分发测试平台:改变应用开发的游戏规则

App分发测试平台是一个提供应用开发者上传、测试、分享和发布应用的在线服务平台。它为开发者提供了一个高效的测试环境,并为用户提供了一个方便的应用获取渠道。其中,测试环节尤为关键,因为它能够确保应用在上线之前达到预期的功能和性能。 …

问题:Feem无法发送信息OR无法连接(手机端无法发给电脑端)

目录 前言 问题分析 资源、链接 其他问题 前言 需要在小米手机、华为平板、Dell电脑之间传输文件,试过安装破解的华为电脑管家、小米的MIUI文件传输等,均无果。(小米“远程管理”ftp传输倒是可以,但速度太慢了,且…

Java JVM 堆、栈、方法区详解

目录 1. 栈 2. 堆 3. 方法区 4. 本地方法栈 5. 程序计数器 首先来看一下JVM运行时数据区有哪些。 1. 栈 在介绍JVM栈之前,先了解一下 栈帧 概念。 栈帧:一个栈帧随着一个方法的调用开始而创建,这个方法调用完成而销毁。栈帧内存放者方…

SpringBoot 集成 Canal 基于 MySQL 做数据同步

一、canal 组件关系 下载地址:https://github.com/alibaba/canal/releases/download/canal-1.1.7/ 这里面主要的有两个 canal.deployer-1.1.7.tar.gz 和 canal.adapter-1.1.7.tar.gz,canal.admin-1.1.7.tar.gz 是一个监控服务,可选&#xf…

ROS学习笔记8——实现ROS通信时的常用命令

机器人系统中启动的节点少则几个,多则十几个、几十个,不同的节点名称各异,通信时使用话题、服务、消息、参数等等都各不相同,一个显而易见的问题是: 当需要自定义节点和其他某个已经存在的节点通信时,如何获取对方的话…

gitgud.io+Sapphire注册账号教程

gitgud.io是一个仓库,地址 https://gitgud.io/,点进去之后会看到注册页面。 意思是需要通过注册这个Sapphire账户来登录。点击右边的Sapphire,就跳转到Sapphire的登陆页面,点击创建新账号,就进入注册页面。&#xff0…

SpiderFlow爬虫平台漏洞利用分析(CVE-2024-0195)

1. 漏洞介绍 SpiderFlow爬虫平台项目中spider-flow-web\src\main\java\org\spiderflow\controller\FunctionController.java文件的FunctionService.saveFunction函数调用了saveFunction函数,该调用了自定义函数validScript,该函数中用户能够控制 functi…

Spring | Spring中的Bean--下

Spring中的Bean: 4.Bean的生命周期5.Bean的配装配式 ( 添加Bean到IOC容器的方式 依赖注入的方式 )5.1 基于XML的配置5.2 基于Annotation (注解) 的装配 (更常用)5.3 自动装配 4.Bean的生命周期 Spring容器可以管理 singleton作用域的Bean的生命周期,在此…

go语言(七)----slice的声明方式

1、声明方式一 //声明一个slice1是一个切片,但是并没有给slice分配空间var slice1 []intslice1 make([]int,3)2、声明方式二 声明一个slice切片,同时给slice分配空间,3个空间,初始化值是0var slice1 []int make([]int,3)3、声…

ICCV2023 | PTUnifier+:通过Soft Prompts(软提示)统一医学视觉语言预训练

论文标题:Towards Unifying Medical Vision-and-Language Pre-training via Soft Prompts 代码:https://github.com/zhjohnchan/ptunifier Fusion-encoder type和Dual-encoder type。前者在多模态任务中具有优势,因为模态之间有充分的相互…

从临床和科研场景分析ChatGPT在医疗健康领域的应用可行性

2023年4月发表在Journal Medical Systems的文献《Evaluating the Feasibility of ChatGPT in Healthcare: An Analysis of Multiple Clinical and Research Scenarios》(评估 ChatGPT 在医疗健康领域的可行性:对多种临床和研究场景的分析)介绍…

IPv6自动隧道---6to4中继

6to4中继 普通IPv6网络需要与6to4网络通过IPv4网络互通,这可以通过6to4中继路由器方式实现。所谓6to4中继,就是通过6to4隧道转发的IPv6报文的目的地址不是6to4地址,但转发的下一跳是6to4地址,该下一跳为路由器我们称之为6to4中继。隧道的IPv4目的地址依然从下一跳的6to4地…

kafka消费相关问题(GPT回答版本)

kafka消费相关问题(GPT回答版本) 在Java中,要避免重复消费Kafka消息,可以使用以下方法 1. 使用消费者组: 在设置Kafka消费者时,可以指定一个消费者组。一个消费者组中可以有多个消费者实例,每…

PPT 编辑模式滚动页面不居中

PPT 编辑模式滚动页面不居中 目标:编辑模式下适应窗口大小、切换页面居中显示 调整视图大小,编辑模式通过Ctrl 鼠标滚轮 或 在视图菜单中点击适应窗口大小。 2. 翻页异常,调整视图大小后,PPT翻页但内容不居中或滚动&#xff0c…

从C到B:消费金融促消费的良性进阶

来源 | 镭射财经(leishecaijing) 盘点2023年,消费金融在促消费上有诸多尝试,提高消费者的金融服务供给,利率下调,贴息分期等。兼顾效果与可持续发展,将促消费的发力点放在商家端(B端…

『MySQL快速上手』-⑩-索引特性

文章目录 1.索引的作用2.索引的理解建立测试表插入多条记录查看结果 2.1 MySQL与磁盘交互的基本单位2.1 为何IO交互要是 Page2.3 理解单个Page2.4 理解多个Page2.5 页目录2.6 单页情况2.7 多页情况2.8 B vs B2.9 聚簇索引 vs 非聚簇索引非聚簇索引聚簇索引 3.索引操作3.1 创建主…

pytest + allure(windows)安装

背景 软硬件环境: windows11,已安装anaconda,python,pycharm用途:使用pytest allure 生成报告allure 依赖java,点击查看java安装教程 allure 下载与安装 从 allure下载网址下载最新版本.zip文件 放在自…

【MySql】MySQL 如何创建新用户

具体代码与实现方法 登录 MySQL: 使用 root 用户或具有相应权限的用户登录到 MySQL。可以使用以下命令: mysql -u root -p这里 -u 后面跟的是用户名,-p 表示提示输入密码。 创建新用户: 使用以下 SQL 命令创建新用户:…

基于YOLOv8深度学习的葡萄簇目标检测系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战

《博主简介》 小伙伴们好,我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源,可关注公-仲-hao:【阿旭算法与机器学习】,共同学习交流~ 👍感谢小伙伴们点赞、关注! 《------往期经典推…