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

JS之防抖和节流

news 2026/3/29 10:37:39

防抖 (debounce)

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

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

没有防抖和节流的缺点：

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

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

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

<!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

应用场景：

鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；
监听滚动事件，比如是否滑到底部自动加载更多，用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) 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 ps: 重置普攻，百度翻译要输完停止一定时间后才翻译。没有防抖和节流的缺点： 函数触发…...

编程日记 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背后的核心概念：注意力机制；编码器-解码器结构；多头注意力等； 例如：The cat sat on the mat； 1、嵌入： 首先，模型将输入序列中的每个单词嵌入到一个高维向量中表示&…...

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

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

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

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

fluwx插件实现微信支付

Flutter开发使用fluwx插件实现微信支付，代码量不多，复杂的是安卓和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 次询问，每次询问给定一个文本串 ti，请回答 s1∼sn 中有多少个字符串 sj 满足 ti 是 sj 的前缀。一个字符串 t 是 s 的前缀当且仅当从 s 的末尾删去若干个（可以为 0 个&#…...

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

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

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

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

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

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

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

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

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

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

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

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

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

HTTP有哪些请求方式？

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

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

接口测试课程结构

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

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

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

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

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

#下班之前写了两个题，后面继续发 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 是一个高吞吐量的分布式消息系统，但在实际应用中，用户经常会遇到一些性能问题和消息堆积的问题。本文将介绍 Kafka 中一些典型问题的原因和排查方法，帮助用户解决问题并优化 Kafka 集群的性能。一、Topic 消息发送慢，并发性…...

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

C# 策略模式（Strategy Pattern）

策略模式定义了一系列的算法，并将每一个算法封装起来，使它们可以相互替换。策略模式让算法的变化独立于使用算法的客户。 // 策略接口 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