节流函数throttle和防抖函数debounce

  1. 防抖函数:用于控制函数的执行频率,n秒后再执行,一定时间内,只执行最后触发一次,若n秒内重复触发,则重新计时
  2. 应用场景: 输入框输入事件、按钮点击事件、浏览器窗口大小调整事件等,手机号,邮箱等输入验证码
  3. 代码
 function debounce(func, delay) {//定时器idlet timerId;return function (...args) {if (timerId) {clearTimeout(timerId);}timerId = setTimeout(() => {func.apply(this, args);}, delay);};}
  1. 节流函数,限制函数的执行频率,一段时间内,触发多次,只执行一次
  2. 应用场景,页面滚动,按钮高频点击,游戏技能冷却,搜索框,鼠标移动
  3. 代码
 function throttle(func, wait) {let lastTime = 0;return function () {const now = new Date().getTime();if (now - lastTime > wait) {fn.apply(this, arguments);lastTime = now;}};}
  1. 区别:防抖:n秒内,若是重复触发,则重新计时;节流:n秒内,多次触发,只执行一次
  2. 调用,如下
//定义回调函数
function inputChange() {console.log("输入值变化");}//定义输入事件调用函数const debounceInput = debounce(inputChange, 2000);//模拟输入事件setInterval(debounceInput, 1000);

在vue里面使用,参考以下文章
https://blog.csdn.net/HDdgut/article/details/141157245

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

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

相关文章

UI自动化测试示例:python+pytest+selenium+allure

重点应用是封装、参数化: 比如在lib文件夹下,要存储封装好的方法和必要的环境变量(指网址等) 1.cfg.py:封装网址和对应的页面 SMP_ADDRESS http://127.0.0.1:8234SMP_URL_LOGIN f{SMP_ADDRESS}/login.html SMP_URL_DE…

【微服务】springboot远程docker进行debug调试使用详解

目录 一、前言 二、线上问题常用解决方案 2.1 微服务线上运行中常见的问题 2.2 微服务线上问题解决方案 2.3 远程debug概述 2.3.1 远程debug原理 2.3.2 远程debug优势 三、实验环境准备 3.1 搭建springboot工程 3.1.1 工程结构 3.1.2 引入基础依赖 3.1.3 添加配置文…

RU 19.24 Standalone(GI和DB分开打)

参考文档&#xff1a;Oracle Database Patch 36582629 - GI Release Update 19.24.0.0.240716 2.1.1.1 OPatch Utility Information 12.2.0.1.42 or later 2.1.1.2 Validation of Oracle Inventory 分别在GI和Oracle Home下执行 $ <ORACLE_HOME>/OPatch/opatch lsinven…

错误:SyntaxError: f-string: unmatched ‘(‘

报错代码&#xff1a; let platformList [[${entityList}]]; 提示错误原因&#xff1a; 报错这行代码 用到了thymeleaf 解析&#xff0c;因为 html页面 不仅在头部需要引入 <html lang"en" xmlns:shiro"http://www.pollix.at/thymeleaf/shiro&qu…

400行程序写一个实时操作系统(九):替换FreeRTOS的内存管理算法

前言 通过前面几章&#xff0c;笔者带领大家完成了内存管理算法的编写。 我们完成的内存管理算法&#xff0c;被称为小内存管理算法。我们也可以将它作为一个库&#xff0c;在后续的嵌入式开发中&#xff0c;使用我们自己编写的malloc&#xff0c;不仅效率会更高&#xff0c;…

机器学习笔记-2

文章目录 一、Linear model二、How to represent this function三、Function with unknown parameter四、ReLU总结、A fancy name 一、Linear model 线性模型过于简单&#xff0c;有很大限制&#xff0c;我们需要更多复杂模式 蓝色是线性模型&#xff0c;线性模型无法去表示…

如何匿名浏览网站,保护在线隐私?

在现如今的网络世界&#xff0c;在线隐私已不复存在。你总是被跟踪&#xff0c;即使你使用隐身模式也无济于事。隐身模式会阻止浏览器保存你的浏览历史记录。但它并不能阻止你的互联网服务提供商 (ISP)、雇主、学校、图书馆或你访问的网站看到你在网上做什么。 更有不法分子在未…

Lumerical学习——资源管理和运行模拟

一、资源管理&#xff08;Resource Manager&#xff09; 在模拟计算前必须对计算资源进行配置。采用资源管理器可以完成这项任务。单击主工具条的“资源&#xff08;Resources&#xff09;”按钮&#xff08;见上图&#xff09;就可以打开资源管理器。通常每个计算机只需设置一…

大型生物制药企业如何实现安全又高效地跨网域数据传输?

大型生物制药企业由于组织结构庞大、业务覆盖研发、生产及销售&#xff0c;因此内部会再细分为多个管理单位&#xff0c;包括研发部门、生产部门、质量控制部门、供应链管理部门及营销部和日常业务支撑部门等。在物理区域划分上&#xff0c;大型生物制药企业会设立实验室、研发…

摇人摇人, JD内推岗位(社招+校招)

摇人摇人, 有找工作的家人们看过来啊~ 虚位以待, 快到碗里来 算法开发工程师岗 京东云 北京|T7, 5-10年 岗位职责&#xff1a; 参与基于RAG知识库平台和ChatBI产品打造和商业化落地&#xff0c;进行相关技术&#xff1a;包括OCR、文档拆分、意图理解、多轮对话、NL2SQL、Embed…

mysql用户管理(user表列信息介绍,本质,管理操作),数据库的权限管理(权限列表,权限操作)

目录 用户管理 介绍 user表 介绍 列信息 Host User *_priv authentication_string 用户管理的本质 操作 创建用户 删除用户 修改用户信息 修改密码 自己修改 root用户修改指定用户的密码 数据库的权限 权限列表 给用户授权 查看权限 回收权限 刷新权限 …

Linux性能调优,还可以从这些方面入手

linux是目前最常用的操作系统&#xff0c;下面是一些常见的 Linux 系统调优技巧&#xff0c;在进行系统调优时&#xff0c;需要根据具体的系统负载和应用需求进行调整&#xff0c;并进行充分的测试和监控&#xff0c;以确保系统的稳定性和性能。同时&#xff0c;调优过程中要谨…

万界星空科技:智能称重打标系统

万界星空科技的称重系统是其为制造业&#xff0c;特别是线缆、漆包线、食品等行业提供的重要解决方案之一。以下是对该系统的详细介绍&#xff1a; 一、系统概述 万界星空科技称重系统是集成在其MES&#xff08;制造执行系统&#xff09;中的一个功能模块&#xff0c;专门用于…

基于springboot实习管理系统

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 系统展示 【2024最新】基于JavaSpringBootVueMySQL的&#xff0c;前后端分离。 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;…

自动化测试数据:如何正确地选择不同格式文件「详细介绍」?

自动化测试数据&#xff1a;如何正确地选择不同格式文件「详细介绍」&#xff1f; 前言1. 不同的格式文件对比2. 读取文件2.1 读取Excel文件2.2 读取CSV文件2.3 读取YAML文件2.3.1 字典2.3.2 列表2.3.3 混合类型2.3.4 包含列表的字典2.3.5 包含字典的列表2.3.6 复杂嵌套 2.4 读…

React Agent 自定义实现

目录 背景 langchin 中的 agent langchin 中 agent 的问题 langchain 的 agent 案例 自定义 React Agent 大模型 工具定义 问题设定 问题改写&#xff0c;挖掘潜在意图 React Prompt 下一步规划 问题总结 代码 背景 之前使用过 langchian 中的 agent 去实现过一些…

2020年计算机网络408真题解析

第一题&#xff1a; 解析&#xff1a;OSI参考模型网络协议的三要素 网络协议的三要素&#xff1a;语法 &#xff0c;语义&#xff0c;同步&#xff08;时序&#xff09; 语法&#xff1a;定义收发双方所交换信息的格式 语法&#xff1a;定义收发双方所要完成的操作 网页的加载 …

Shiro(认证Authentication)

Shiro简介 Apache Shiro是一个强大且灵活的开源安全框架&#xff0c;它提供了身份验证、授权、密码学和会话管理等一系列安全相关的功能。Shiro的设计目标是易于使用&#xff0c;同时保持强大的安全性。它可以在任何Java应用程序中使用&#xff0c;无论是简单的Java SE应用程序…

深入理解队列(Queue)的实现(纯小白进)

目录&#xff1a; 前言一、 什么是队列?1.1、 队列的特性1.2、 队列的图解 二、 队列的详细实现2.1、 队列不同的实现方式2.2、 队列结构体2.3、 队列的初始化2.4、 入队列2.5、 出队列2.6、 获取对头元素2.7、 获取队尾元素2.8、 队列的判空2.9、 队列有效的元素个数2.10、 队…

Kind部署的K8s证书过期后的解决方案

证书通常有效期为1年&#xff0c;一年后服务将不可用解决方案就是更新证书 1. 找到 Kind 集群的控制平面容器名称,容器名称不一定是这个 docker ps --filter "namekind-control-plane"2. 进入 Kind 控制平面的容器&#xff1a; docker exec -it kind-control-plane…