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

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

news 2026/2/8 19:35:39

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

防抖

防抖(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>

节流

节流(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>

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

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

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

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

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

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

正则表达式|*+?

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

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

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

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

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

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

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

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

STM32H7的MPU学习和应用示例

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

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

964: 数细胞

样例： 解法： 1.遍历矩阵 2.判断矩阵[i][j]，若是未标记细胞则遍历相邻所有未标记细胞并标记，且计数实现：遍历相邻所有未标记细胞以DFS实现： 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的应用场景，里面提到GPT bot的基本使用：基于GPT训练好的数据，回答用户的问题。但在使用过程中，如果用户的问题里面出现最新的术语，就会出现这种提示： 截至我…...

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

SpringMVC--SpringMVC的视图

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

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

Datax，hbase与mysql数据相互同步

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

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

ubuntu spdlog 封装成c++类使用

安装及编译方法：ubuntu spdlog 日志安装及使用_spdlog_logger_info-CSDN博客 h文件： #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、函数的模拟实现（1）计数法（2）递归法（3）指针 - 指针二、 s t r c p y strcpy strcpy 函数2.1、函数功能…...

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

数据库（1）

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

编程日记 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 中的一个钩子函数，用于处理函数组件中的副作用操作，如发送网络请求、订阅消息、手动修改 DOM 等。下面是 useEffect 的用法总结： 基本用法 import React, { useState, useEffect } from react;function Example() {cons…...

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

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

1、概述源码放在文章末尾该项目实现通过回车键让光标从一个编辑框跳转到另一个编辑框，下面是demo演示： 项目部分代码如下： #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位的，但是有时候会考虑16位机。总结一下在三种位数下常用的数据类型所占的字节大小。数据类型16位(byte)32位(byte)64位(byte)取值范围char111-128 ~ 127unsigned char1110 ~ 255short int / short222-32768~32767unsigned short222…...

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

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

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

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

Django框架设计原理

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

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

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录一、问题背景与挑战二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/2/7 5:16:28

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/4 17:44:58

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎（Physics Engine） 物理引擎是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于游戏开发、动画制作、虚…...

编程新知 2026/2/4 2:08:30

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

React19源码系列之事件插件系统

事件类别事件类型定义文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。其核心目标是避免复杂和过度设计，遵循“让事情保…...

编程新知 2026/1/27 18:13:23

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础目录一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件三. 文件查看3.1 打开文件时，显示行号3.2 翻页查看四. 文件编辑4.1 Ctrl K 复制和 Ctrl U 粘贴4.2 Alt/Esc U 撤回五. 文件保存与退出5.1 Ctrl …...

编程新知 2026/1/31 2:17:41

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦可远程调试基于PHP的连锁酒店管理系统一介绍连锁酒店管理系统基于原生PHP开发，数据库mysql，前端bootstrap。系统角色分为用户和管理员。技术栈 phpmysqlbootstrapphpstudyvscode 二功能用户 1 注册/登录/注销 2 个人中…...

编程新知 2026/1/31 6:20:15

Oracle11g安装包

Oracle 11g安装包适用于windows系统，64位下载路径 oracle 11g 安装包...

编程新知 2025/9/13 16:14:04

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略一、功能背景与技术选型在团队协作场景中，群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS，在uniapp中实现： 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览二…...

编程新知 2025/9/14 20:44:53

相关文章：