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

JS之防抖和节流

news 2025/9/16 15:29:38

防抖 (debounce)

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

ps: 重置普攻，百度翻译要输完停止一定时间后才翻译。

没有防抖和节流的缺点：

  1. 函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
  2. 浪费请求资源

策略：
当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。
在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。

案例：停止输入后将输入的字符串翻转
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>防抖 </title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}body {display: flex;justify-content: center;align-items: center;}.container {display: flex;justify-content: space-around;width: 800px;height: 400px;padding: 20px;box-shadow: 0 0 8px #222;}.container div {width: 350px;height: 380px;padding: 8px;border: 1px solid #ccc;font-size: 18px;line-height: 20px;word-break: break-all;}.input-box {color: #368;outline: none;}.show-box {color: orange;}</style>
</head><body><div class="container"><div class="input-box" contenteditable></div><div class="show-box"></div></div><script>var oInput = document.querySelector('.input-box')var oShow = document.querySelector('.show-box')var timeOut;//这个timeOut必须是全局变量
oInput.addEventListener('input', function () {timeOut && clearTimeout(timeOut);timeOut = setTimeout(function () {oShow.innerText = translate(oInput.innerText);}, 500);
}, false);function translate(str) {return str.split("").reverse().join("");
}</script>
</body></html>

节流 (throttling)

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。**节流会稀释函数的执行频率。

对于节流，有多种方式可以实现 时间戳 定时器 束流等。

ps : 技能CD

应用场景：

  1. 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

  2. 在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；

  3. 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；

策略：
固定周期内，只执行一次动作，若没有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期。
特点：
连续高频触发事件时，动作会被定期执行，响应平滑

计时器版

var oCon = $('.container');
var num = 0;
var valid = true;
oCon.addEventListener('mousemove', function () {if (!valid) {return false;}valid = false;setTimeout(function () {count();valid = true;}, 500);
}, false);function count() {oCon.innerText = num++;
}

时间戳版

var oCon = $('.container');
var num = 0;
var time = Date.now();
oCon.addEventListener('mousemove', function () {if (Date.now() - time < 600) {return false;}time = Date.now();count();
}, false);function count() {oCon.innerText = num++;
}

束流器版

一般用在游戏中，元素以不同频率运动

这样做的好处是可以把所有元素用同一个定时器来管理，用速差来做不同频率的运动

var oCon = $('.container');
var num = 0;
var time = 0;
oCon.addEventListener('mousemove', function () {time++;if (time % 30 !== 0) {return false;}console.log(time)count();
}, false);function count() {oCon.innerText = num++;
}

案例：同一个定时器中 红色小球运动两次 蓝色小球运动一次

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定时器运动 </title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}div {position: absolute;width: 100px;height: 100px;border-radius: 50%;}.red {top: 100px;background-color: red;}.blue {background-color: blue;}</style>
</head><body><div class="red"></div><div class="blue"></div><script src="js/common.js"></script><script>var oRed = $('.red');var oBlue = $('.blue');var speed = 0;var counter = 0;var time;time = setInterval(function () {speed += .1;counter++;oRed.style.left = oRed.offsetLeft + speed+ 'px';if (counter % 2 === 0) {oBlue.style.left = oBlue.offsetLeft + speed+ 'px';}}, 1000 / 30);</script>
</body></html>

相关文章：

JS之防抖和节流

防抖 (debounce) 所谓防抖&#xff0c;就是指触发事件后在 n 秒内函数只能执行一次&#xff0c;如果在 n 秒内又触发了事件&#xff0c;则会重新计算函数执行时间。 ps: 重置普攻&#xff0c;百度翻译要输完停止一定时间后才翻译。 没有防抖和节流的缺点&#xff1a; 函数触发…...

编程日记 2024/7/10 6:56:42

Open3D 点云PCA算法配准（粗配准）

目录 一、概述 1.1PCA配准的原理 1.2PCA配准的应用 二、代码实现 三、实现效果 3.1原始点云 3.2配准后点云 3.3变换矩阵 一、概述 PCA（Principal Component Analysis，主成分分析）是一种用于降维和特征提取的统计方法。在点云处理中，PCA可以用于点云配准（a…...

编程日记 2024/7/10 6:55:41

Transformer中的编码器和解码器结构有什么不同？

Transformer背后的核心概念&#xff1a;注意力机制&#xff1b;编码器-解码器结构&#xff1b;多头注意力等&#xff1b; 例如&#xff1a;The cat sat on the mat&#xff1b; 1、嵌入&#xff1a; 首先&#xff0c;模型将输入序列中的每个单词嵌入到一个高维向量中表示&…...

编程日记 2024/7/10 6:54:40

【深度学习】第5章——卷积神经网络（CNN）

一、卷积神经网络 1.定义 卷积神经网络&#xff08;Convolutional Neural Network, CNN&#xff09;是一种专门用于处理具有网格状拓扑结构数据的深度学习模型&#xff0c;特别适用于图像和视频处理。CNN 通过局部连接和权重共享机制&#xff0c;有效地减少了参数数量&#x…...

编程日记 2024/7/10 6:52:38

fluwx插件实现微信支付

Flutter开发使用fluwx插件实现微信支付&#xff0c;代码量不多&#xff0c;复杂的是安卓和iOS的各种配置。 在 pubspec.yaml 文件中添加fluwx依赖 fluwx: ^4.5.5 使用方法 通过fluwx注册微信Api await Fluwx().registerApi(appId: wxea7a1c53d9e5849d, universalLink: htt…...

编程日记 2024/7/10 6:51:37

k8s核心操作_Deployment的扩缩容能力_Deployment自愈和故障转移能力---分布式云原生部署架构搭建022

然后我们上面说了k8s中的deployment的多副本能力 然后,我们再来看 k8s中的deployment的扩缩容能力 可以看到,对于扩容,要使用 kubectl scale 命令 对于缩容 要使用kubectl scale 命令都是使用这个命令对吧 来试试,可以看到上面命令 首先看看 kubectl get pod 可以看到有…...

编程日记 2024/7/10 6:50:36

P8306 【模板】字典树

题目描述 给定 n 个模式串 s1​,s2​,…,sn​ 和 q 次询问&#xff0c;每次询问给定一个文本串 ti​&#xff0c;请回答 s1​∼sn​ 中有多少个字符串 sj​ 满足 ti​ 是 sj​ 的前缀。 一个字符串 t 是 s 的前缀当且仅当从 s 的末尾删去若干个&#xff08;可以为 0 个&#…...

编程日记 2024/7/10 6:49:35

面试官：讲一下如何终止一个 Promise 继续执行

我们知道 Promise 一旦实例化之后&#xff0c;状态就只能由 Pending 转变为 Rejected 或者 Fulfilled&#xff0c; 本身是不可以取消已经实例化之后的 Promise 了。 但是我们可以通过一些其他的手段来实现终止 Promise 的继续执行来模拟 Promise 取消的效果。 Promise.race …...

编程日记 2024/7/10 6:45:32

linux之常见的coredump原因都有哪些

Core dump通常发生在程序遇到严重错误时&#xff0c;操作系统会生成core文件来记录程序崩溃时的内存、寄存器状态、栈信息等。下面是一些常见的导致core dump的原因&#xff1a; 段错误&#xff08;Segmentation Fault&#xff09;&#xff1a; 当程序尝试访问不允许访问的内存…...

编程日记 2024/7/10 6:44:31

低资源低成本评估大型语言模型（LLMs）

随着新的大型语言模型&#xff08;LLMs&#xff09;的持续发展&#xff0c;从业者发现自己面临着众多选择&#xff0c;需要从数百个可用选项中选择出最适合其特定需求的模型、提示[40]或超参数。例如&#xff0c;Chatbot Arena基准测试平台积极维护着近100个模型&#xff0c;以…...

编程日记 2024/7/10 6:43:30

什么是RPC？有哪些RPC框架？

定义 RPC&#xff08;Remote Procedure Call&#xff0c;远程过程调用&#xff09;是一种允许运行在一台计算机上的程序调用另一台计算机上子程序的技术。这种技术屏蔽了底层的网络通信细节&#xff0c;使得程序间的远程通信如同本地调用一样简单。RPC机制使得开发者能够构建分…...

编程日记 2024/7/10 6:38:24

HTTP有哪些请求方式？

GET&#xff1a;请求指定的资源。例如&#xff0c;用于获取网页内容。POST&#xff1a;向指定资源提交数据&#xff08;例如表单提交&#xff09;。POST请求的数据通常在请求体中。PUT&#xff1a;将请求体中的数据放置到请求URI指定的位置&#xff0c;如果该资源不存在则创建&…...

编程日记 2024/7/10 6:37:23

接口测试课程结构

课程大纲 如图&#xff0c;接下来的阶段课程&#xff0c;依次专项讲解如下专题&#xff0c;能力级别为中级&#xff0c;进阶后基本为中高级&#xff1a; 1.接口基础知识&#xff1b; 2.抓包工具&#xff1b; 3.接口工具&#xff1b; 4.mock服务搭建&#xff08;数据模拟服务&am…...

编程日记 2024/7/10 6:36:22

leetcode--从中序与后序遍历序列构造二叉树

leeocode地址&#xff1a;从中序与后序遍历序列构造二叉树 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder …...

编程日记 2024/7/10 6:35:21

西瓜杯CTF(1)

#下班之前写了两个题&#xff0c;后面继续发 Codeinject <?php#Author: h1xaerror_reporting(0); show_source(__FILE__);eval("var_dump((Object)$_POST[1]);"); payload 闭合后面的括号来拼接 POST / HTTP/1.1 Host: 1dc86f1a-cccc-4298-955d-e9179f026d54…...

编程日记 2024/7/10 6:34:20

Kafka 典型问题与排查以及相关优化

Kafka 是一个高吞吐量的分布式消息系统&#xff0c;但在实际应用中&#xff0c;用户经常会遇到一些性能问题和消息堆积的问题。本文将介绍 Kafka 中一些典型问题的原因和排查方法&#xff0c;帮助用户解决问题并优化 Kafka 集群的性能。 一、Topic 消息发送慢&#xff0c;并发性…...

编程日记 2024/7/10 6:33:19

C# 策略模式（Strategy Pattern）

策略模式定义了一系列的算法&#xff0c;并将每一个算法封装起来&#xff0c;使它们可以相互替换。策略模式让算法的变化独立于使用算法的客户。 // 策略接口 public interface IStrategy { void Execute(); } // 具体策略A public class ConcreteStrategyA : IStra…...

编程日记 2024/7/10 6:32:18

【初阶数据结构】1.算法复杂度

文章目录 1.数据结构前言1.1 数据结构1.2 算法1.3 如何学好数据结构和算法 2.算法效率2.1 复杂度的概念2.2 复杂度的重要性 3.时间复杂度3.1 大O的渐进表示法3.2 时间复杂度计算示例3.2.1 示例13.2.2 示例23.2.3 示例33.2.4 示例43.2.5 示例53.2.6 示例63.2.7 示例7 4.空间复杂…...

编程日记 2024/7/10 6:31:17

（图文详解）小程序AppID申请以及在Hbuilderx中运行

今天小编给大家带来了如何去申请APPID&#xff0c;如果你是小程序的开发者&#xff0c;就必须要这个id。 申请步骤 到小程序注册页面&#xff0c;注册一个小程序账号 微信公众平台 填完信息后提交注册 会在邮箱收到 链接激活账号 确认。邮箱打开链接后&#xff0c;会输入实…...

编程日记 2024/7/10 6:30:16

科技创新引领水利行业升级：深入分析智慧水利解决方案的核心价值，展望其在未来水资源管理中的重要地位与作用

目录 引言 一、智慧水利的概念与内涵 二、智慧水利解决方案的核心价值 1. 精准监测与预警 2. 优化资源配置 3. 智能运维管理 4. 公众参与与决策支持 三、智慧水利在未来水资源管理中的重要地位与作用 1. 推动水利行业转型升级 2. 保障国家水安全 3. 促进生态文明建设…...

编程日记 2024/7/10 6:29:14

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/9/9 10:11:30

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/9/7 12:10:26

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/8/15 19:59:33

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/9/3 21:03:21

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/8/26 5:10:22

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/9/12 23:22:11

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/9/7 8:51:06

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/8/1 7:53:11

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11