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

《前端面试题》- JS基础 - 防抖和节流

news 文章来源：https://blog.csdn.net/iotzzh/article/details/124818739 2024/11/1 18:32:27

在界面触发点击，滚动，输入校验等事件时，如果对事件的触发频率不加以限制，会给浏览器增加负担，且对用户不友好。防抖和节流就是针对类似情况的解决方案。

防抖

防抖(debounce)：当连续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>点击<span class="count">0</span>次</div><button class="button">button</button><script>let count = 0;function debounce(fn, await) {let timer = null;return function(...args) {if(timer) clearTimeout(timer);timer = setTimeout(() => fn.apply(this, args), await);}}function calCount() {const ele = document.getElementsByClassName('count')[0];count++;ele.innerHTML = count;}const btn = document.getElementsByClassName('button')[0];btn.addEventListener('click', debounce(calCount, 1000));</script>
</body>
</html>
7dbe1e0e762bf95f4ee9db8b990bcf09.gif

节流

节流(throttle)：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>点击<span class="count">0</span>次</div><button class="button">button</button><script>let count = 0;function throttle(fn, await) {let preTime = Date.now();return function(...args) {let now = Date.now();if(now - preTime >= await) {fn.apply(this, args);preTime = Date.now();}}}function calCount() {const ele = document.getElementsByClassName('count')[0];count++;ele.innerHTML = count;}const btn = document.getElementsByClassName('button')[0];btn.addEventListener('click', throttle(calCount, 1000));</script>
</body>
</html>
2222a2b5fe2084c1040e347d68b133f4.gif

 

相关文章：

《前端面试题》- JS基础 - 防抖和节流

在界面触发点击&#xff0c;滚动&#xff0c;输入校验等事件时&#xff0c;如果对事件的触发频率不加以限制&#xff0c;会给浏览器增加负担&#xff0c;且对用户不友好。防抖和节流就是针对类似情况的解决方案。 防抖 防抖(debounce)&#xff1a;当连续触发事件时&#xff0…...

编程日记 2024/4/14 21:44:42

RAGFlow：基于OCR和文档解析的下一代 RAG 引擎

一、引言 在人工智能的浪潮中&#xff0c;检索增强生成&#xff08;Retrieval-Augmented Generation&#xff0c;简称RAG&#xff09;技术以其独特的优势成为了研究和应用的热点。RAG技术通过结合大型语言模型&#xff08;LLMs&#xff09;的强大生成能力和高效的信息检索系统…...

编程日记 2024/4/14 21:42:40

正则表达式|*+?

在理解编程语言和编译技术的上下文中&#xff0c;了解正则表达式&#xff08;regular expressions&#xff09;和正则集&#xff08;regular sets&#xff09;的概念是非常重要的。这些概念主要用于描述一组字符串的模式&#xff0c;广泛应用于词法分析中识别各类标记&#xff…...

编程日记 2024/4/14 21:41:39

前端开发攻略---根据音频节奏实时绘制不断变化的波形图。深入剖析如何通过代码实现音频数据的可视化。

1、演示 2、代码分析 逐行解析 JavaScript 代码块&#xff1a; const audioEle document.querySelector(audio) const cvs document.querySelector(canvas) const ctx cvs.getContext(2d)这几行代码首先获取了 <audio> 和 <canvas> 元素的引用&#xff0c;并使用…...

编程日记 2024/4/14 21:40:38

【计算机毕业设计】基于Java+SSM的实战开发项目150套(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f9e1;今天给大家分享150的Java毕业设计&#xff0c;基于ssm框架&#xff0c;这些项目都经过精心挑选&#xff0c;涵盖了不同的实战主题和用例&#xff0c;可做毕业设计和课程…...

编程日记 2024/4/14 21:39:37

STM32H7的MPU学习和应用示例

STM32H7的MPU学习记录 什么是MPU&#xff1f;MPU的三种内存类型内存映射MPU保护区域以及优先级 MPU的寄存器XN位AP位TEX、C、B、S位SRD 位SIZE 位CTRL 寄存器的各个位 示例总结 什么是MPU&#xff1f; MPU&#xff08;Memory Protection Unit&#xff0c;内存保护单元&#xf…...

编程日记 2024/4/14 21:37:35

964: 数细胞

样例&#xff1a; 解法&#xff1a; 1.遍历矩阵 2.判断矩阵[i][j]&#xff0c;若是未标记细胞则遍历相邻所有未标记细胞并标记&#xff0c;且计数 实现&#xff1a;遍历相邻所有未标记细胞 以DFS实现&#xff1a; function dfs(当前状态) {if (终止条件) {}vis[标记当前状…...

编程日记 2024/4/14 21:36:34

流程图步骤条

1.结构 <ul class"stepUl"> <li class"stepLi" v-for"(item, index) in stepList" :key"index"> <div class"top"> <p :class"{active: currentState > item.key}">{{ item.value }}…...

编程日记 2024/4/14 21:34:31

GPT知识库浅析

一、引言 上篇文章《GPT简介及应用》介绍了GPT的应用场景&#xff0c;里面提到GPT bot的基本使用&#xff1a;基于GPT训练好的数据&#xff0c;回答用户的问题。 但在使用过程中&#xff0c;如果用户的问题里面出现最新的术语&#xff0c;就会出现这种提示&#xff1a; 截至我…...

编程日记 2024/4/14 21:33:30

SpringMVC--SpringMVC的视图

目录 1. 总述 2. ThymeleafView视图 3. 转发视图 4. 重定向视图 5. 视图控制器view-controller 1. 总述 在SpringMVC框架中&#xff0c;视图&#xff08;View&#xff09;是一个非常重要的概念&#xff0c;它负责将模型数据&#xff08;Model&#xff09;展示给用户。简单…...

编程日记 2024/4/14 21:32:29

Datax，hbase与mysql数据相互同步

参考文章&#xff1a;datax mysql 和hbase的 相互导入 目录 0、软件版本说明 1、hbase数据同步至mysql 1.1、hbase数据 1.2、mysql数据 1.3、json脚本&#xff08;hbase2mysql.json&#xff09; 1.4、同步成功日志 2、mysql数据同步至hbase 1.1、hbase数据 1.2、mysql…...

编程日记 2024/4/14 21:28:24

ubuntu spdlog 封装成c++类使用

安装及编译方法&#xff1a;ubuntu spdlog 日志安装及使用_spdlog_logger_info-CSDN博客 h文件&#xff1a; #ifndef LOGGING_H #define LOGGING_H#include <iostream> #include <cstring> #include <sstream> #include <string> #include <memor…...

编程日记 2024/4/14 21:27:23

【C语言】——字符串函数的使用与模拟实现（上）

【C语言】——字符串函数 前言一、 s t r l e n strlen strlen 函数1.1、函数功能1.2、函数的使用1.3、函数的模拟实现&#xff08;1&#xff09;计数法&#xff08;2&#xff09;递归法&#xff08;3&#xff09;指针 - 指针 二、 s t r c p y strcpy strcpy 函数2.1、函数功能…...

编程日记 2024/4/14 21:26:22

数据库（1）

目录 1.什么是事务&#xff1f;事务的基本特性ACID&#xff1f; 2.数据库中并发一致性问题&#xff1f; 3.数据的隔离等级&#xff1f; 4.ACID靠什么保证的呢&#xff1f; 5.SQL优化的实践经验&#xff1f; 1.什么是事务&#xff1f;事务的基本特性ACID&#xff1f; 事务指…...

编程日记 2024/4/14 21:24:20

VirtualBox - 与 Win10 虚拟机 与 宿主机 共享文件

原文链接 https://www.cnblogs.com/xy14/p/10427353.html 1. 概述 需要在 宿主机 和 虚拟机 之间交换文件复制粘贴 貌似不太好使 2. 问题 设置了共享文件夹之后, 找不到目录 3. 环境 宿主机 OS Win10开启了 网络发现 略虚拟机 OS Win10开启了 网络发现 略Virtualbox 6 4…...

编程日记 2024/4/14 21:23:19

深入浅出 useEffect：React 函数组件中的副作用处理详解

useEffect 是 React 中的一个钩子函数&#xff0c;用于处理函数组件中的副作用操作&#xff0c;如发送网络请求、订阅消息、手动修改 DOM 等。下面是 useEffect 的用法总结&#xff1a; 基本用法 import React, { useState, useEffect } from react;function Example() {cons…...

编程日记 2024/4/14 21:22:16

《QT实用小工具·十九》回车跳转到不同的编辑框

1、概述 源码放在文章末尾 该项目实现通过回车键让光标从一个编辑框跳转到另一个编辑框&#xff0c;下面是demo演示&#xff1a; 项目部分代码如下&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget>namespace Ui { class Widget; }class Widget : p…...

编程日记 2024/4/14 21:21:15

基本的数据类型在16位、32位和64位机上所占的字节大小

1、目前常用的机器都是32位和64位的&#xff0c;但是有时候会考虑16位机。总结一下在三种位数下常用的数据类型所占的字节大小。 数据类型16位(byte)32位(byte)64位(byte)取值范围char111-128 ~ 127unsigned char1110 ~ 255short int / short222-32768~32767unsigned short222…...

编程日记 2024/4/14 21:20:13

关注招聘 关注招聘 关注招聘

&#x1f525;关注招聘 &#x1f525;关注招聘 &#x1f525;关注招聘 &#x1f525;开源产品&#xff1a; 1.农业物联网平台开源版 2.充电桩系统开源版 3.GPU池化软件(AI人工智能训练平台/推理平台) 开源版 产品销售&#xff1a; 1.农业物联网平台企业版 2.充电桩系统企业…...

编程日记 2024/4/14 21:19:12

Django框架设计原理

相信大多数的Web开发者对于MVC&#xff08;Model、View、Controller&#xff09;设计模式都不陌生&#xff0c;该设计模式已经成为Web框架中一种事实上的标准了&#xff0c;Django框架自然也是一个遵循MVC设计模式的框架。不过从严格意义上讲&#xff0c;Django框架采用了一种更…...

编程日记 2024/4/14 21:18:10

Linux ARM平台开发系列讲解（QEMU篇） 1.2 新添加一个Linux kernel设备树

1. 概述 上一章节我们利用QEMU成功启动了Linux kernel，但是细心的小伙伴就会发现，我们用默认的defconfig是没有找到设备树源文件的，但是又发现kernel启动时候它使用了设备树riscv-virtio,qemu，这是因为qemu用了一个默认的设备树文件，该章节呢我们就把这个默认的设备树文件…...

编程日记 2024/4/14 21:17:09

OSPF动态路由实验（思科）

华为设备参考&#xff1a; 一&#xff0c;技术简介 OSPF&#xff08;Open Shortest Path First&#xff09;是一种内部网关协议&#xff0c;主要用于在单一自治系统内决策路由。它是一种基于链路状态的路由协议&#xff0c;通过链路状态路由算法来实现动态路由选择。 OSPF的…...

编程日记 2024/4/14 21:16:08

MyBatis 等类似的 XML 映射文件中，当传入的参数为空字符串时，＜if＞ 标签可能会导致 SQL 语句中的条件判断出现意外结果。

问题 传入的参数为空字符串&#xff0c;但还是根据参数查询了。 原因 在 XML 中使用 标签进行条件判断时&#xff0c;需要明确理解其行为。在 MyBatis 等类似的 XML 映射文件中&#xff0c; 标签通常用于动态拼接 SQL 语句的条件部分。当传入的参数 riskLevel 为空字符串时…...

编程日记 2024/4/14 21:15:07

git的安装

git的安装 在CentOS系统上安装git时&#xff0c;我们可以选择yum安装或者源码编译安装两种方式。Yum的安装方式的好处是比较简单&#xff0c;直接输入”yum install git”命令即可。但是Yum的安装的话&#xff0c;不好控制安装git的版本。如果我们想选择安装git的版本&#xf…...

编程日记 2024/4/14 21:14:05

蓝桥杯嵌入式模板（cubemxkeil5）

LED 引脚PC8~PC15&#xff0c;默认高电平&#xff08;灭&#xff09;。 此外还要配置PD2为输出引脚&#xff08;控制LED锁存&#xff09; &#xff0c;默认低电平&#xff08;锁住&#xff09;&#xff01;&#xff01;&#xff01; #include "led.h"void led_disp…...

编程日记 2024/4/14 21:12:03

ELFK （Filebeat+ELK）日志分析系统

一. 相关介绍 Filebeat&#xff1a;轻量级的开源日志文件数据搜集器。通常在需要采集数据的客户端安装 Filebeat&#xff0c;并指定目录与日志格式&#xff0c;Filebeat 就能快速收集数据&#xff0c;并发送给 logstash 进或是直接发给 Elasticsearch 存储&#xff0c;性能上相…...

编程日记 2024/4/14 21:11:02

HttpClient、OKhttp、RestTemplate接口调用对比（ Java HTTP 客户端）

文章目录 HttpClient、OKhttp、RestTemplate接口调用对比HttpClientOkHttprestTemplate HttpClient、OKhttp、RestTemplate接口调用对比 HttpClient、OkHttp 和 RestTemplate 是三种常用的 Java HTTP 客户端库&#xff0c;它们都可以用于发送 HTTP 请求和接收 HTTP 响应&#…...

编程日记 2024/4/14 21:08:59

[旅游] 景区排队上厕所

人有三急&#xff0c;急中最急是上个厕所要排队&#xff0c;而且人还不少&#xff01;这样就需要做一个提前量的预测&#xff0c;万一提前量的预测&#xff0c;搞得不当&#xff0c;非得憋出膀光炎&#xff0c;或者尿裤子。尤其是女厕所太少&#xff01;另外一点是儿童根本就没…...

编程日记 2024/4/14 21:06:57

三 maven的依赖管理

一 maven依赖管理 Maven 依赖管理是 Maven 软件中最重要的功能之一。Maven 的依赖管理能够帮助开发人员自动解决软件包依赖问题&#xff0c;使得开发人员能够轻松地将其他开发人员开发的模块或第三方框架集成到自己的应用程序或模块中&#xff0c;避免出现版本冲突和依赖缺失等…...

编程日记 2024/4/14 21:05:56

iperf3 网络性能测试

iperf3测试 1、iperf3简介 iperf3是一个主动测试网络带宽的工具&#xff0c;可以测试iTCP、UDP、SCTP等网络带宽&#xff1b;可以通过参数修改网络协议、缓冲区、测试时间、数据大小等&#xff0c;每个测试结果会得出吞吐量、带宽、重传数、丢包数等测试结果 2、参数详解 通…...

编程日记 2024/4/14 20:59:48

建设手机网站/百度客户端官网

相信钓鱼邮件对于邮件管理员都不陌生&#xff0c;诸如此类那么怎么才能杜绝此类邮件呢&#xff1f;这里简单新建一条规则命名为 钓鱼邮件&#xff0c; 只要是包含 “升”“邮”“箱”“配”“额”这几个字的&#xff0c;统统重定向给管理员&#xff0c;并追加 Cheat Mail &…...

编程日记 2024/11/1 17:55:24

辽宁城市建设网站/百度排名优化

Autotools包含一系列工具&#xff1a;automake、autoconf、autoscan、aclocal等工具组成&#xff0c;使用这组工具可以生成一个完整项目的Makefile。还是看流程图一目了然&#xff1a; 1、准备源文件 以最简单的helloworld为例&#xff1a; bookUbuntu:~/work/Autotools$ l…...

编程日记 2024/11/1 17:52:48

网站备案在哪查/友情链接软件

本书第一章提出了一个看似简单的问题&#xff0c;有最多1000万条不同的整型数据存在于硬盘的文件中&#xff0c;如何在1M内存的情况下对其进行尽可能快的排序。 每个数字用4byte&#xff0c;1M即可存储250 000个数据&#xff0c;显然&#xff0c;只要每次对250 000个数据排序&a…...

编程日记 2024/11/1 16:12:10

兼职做视频的网站/网页推广怎么做的

&#xfeff;在TCP/IP协议中&#xff0c;TCP协议提供可靠的连接服务&#xff0c;採用三次握手建立一个连接。第一次握手&#xff1a;建立连接时&#xff0c;client发送syn包&#xff08;synj&#xff09;到server&#xff0c;并进入SYN_SENT状态&#xff0c;等待server确认&…...

编程日记 2024/11/1 11:03:19

哪个网站做黑色星期五订酒店活动/域名解析网站

作者&#xff1a;LanceToBigDatahttps://www.cnblogs.com/zhangyinhua/p/11558510.html一、Lambda简述1.1、Lambda概述Lambda 表达式可以理解为简洁地表示可传递的匿名函数的一种方式&#xff1a;它没有名称&#xff0c;但它有参数列表、函数主体、返回类型&#xff0c;可能还有…...

编程日记 2024/11/1 7:12:26

品牌创意网站建设/互联网媒体广告公司

知识点：CSS3 transform 属性、transition属性 实现效果： 效果说明：一排图片大小一致，当鼠标放在任一图片上时，图片放大并且旋转。 制作思路： 1、给图片添加<a>标签，利用伪类选择器实现 2、设置鼠标悬浮在a标签上时，添加动画属性。 3、主要用到属性：transf…...

编程日记 2024/11/1 6:46:58