JS之防抖和节流
防抖 (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: 重置普攻，百度翻译要输完停止一定时间后才翻译。 没有防抖和节流的缺点： 函数触发…...
Open3D 点云PCA算法配准（粗配准）
目录 一、概述 1.1PCA配准的原理 1.2PCA配准的应用 二、代码实现 三、实现效果 3.1原始点云 3.2配准后点云 3.3变换矩阵 一、概述 PCA（Principal Component Analysis，主成分分析）是一种用于降维和特征提取的统计方法。在点云处理中，PCA可以用于点云配准（a…...
Transformer中的编码器和解码器结构有什么不同？
Transformer背后的核心概念：注意力机制；编码器-解码器结构；多头注意力等； 例如：The cat sat on the mat； 1、嵌入： 首先，模型将输入序列中的每个单词嵌入到一个高维向量中表示&…...
【深度学习】第5章——卷积神经网络（CNN）
一、卷积神经网络 1.定义 卷积神经网络（Convolutional Neural Network, CNN）是一种专门用于处理具有网格状拓扑结构数据的深度学习模型，特别适用于图像和视频处理。CNN 通过局部连接和权重共享机制，有效地减少了参数数量&#x…...
fluwx插件实现微信支付
Flutter开发使用fluwx插件实现微信支付，代码量不多，复杂的是安卓和iOS的各种配置。 在 pubspec.yaml 文件中添加fluwx依赖 fluwx: ^4.5.5 使用方法 通过fluwx注册微信Api await Fluwx().registerApi(appId: wxea7a1c53d9e5849d, universalLink: htt…...
k8s核心操作_Deployment的扩缩容能力_Deployment自愈和故障转移能力---分布式云原生部署架构搭建022
然后我们上面说了k8s中的deployment的多副本能力 然后,我们再来看 k8s中的deployment的扩缩容能力 可以看到,对于扩容,要使用 kubectl scale 命令 对于缩容 要使用kubectl scale 命令都是使用这个命令对吧 来试试,可以看到上面命令 首先看看 kubectl get pod 可以看到有…...
P8306 【模板】字典树
题目描述 给定 n 个模式串 s1,s2,…,sn 和 q 次询问，每次询问给定一个文本串 ti，请回答 s1∼sn 中有多少个字符串 sj 满足 ti 是 sj 的前缀。 一个字符串 t 是 s 的前缀当且仅当从 s 的末尾删去若干个（可以为 0 个&#…...
面试官：讲一下如何终止一个 Promise 继续执行
我们知道 Promise 一旦实例化之后，状态就只能由 Pending 转变为 Rejected 或者 Fulfilled， 本身是不可以取消已经实例化之后的 Promise 了。 但是我们可以通过一些其他的手段来实现终止 Promise 的继续执行来模拟 Promise 取消的效果。 Promise.race …...
linux之常见的coredump原因都有哪些
Core dump通常发生在程序遇到严重错误时，操作系统会生成core文件来记录程序崩溃时的内存、寄存器状态、栈信息等。下面是一些常见的导致core dump的原因： 段错误（Segmentation Fault）： 当程序尝试访问不允许访问的内存…...
低资源低成本评估大型语言模型（LLMs）
随着新的大型语言模型（LLMs）的持续发展，从业者发现自己面临着众多选择，需要从数百个可用选项中选择出最适合其特定需求的模型、提示[40]或超参数。例如，Chatbot Arena基准测试平台积极维护着近100个模型，以…...
什么是RPC？有哪些RPC框架？
定义 RPC（Remote Procedure Call，远程过程调用）是一种允许运行在一台计算机上的程序调用另一台计算机上子程序的技术。这种技术屏蔽了底层的网络通信细节，使得程序间的远程通信如同本地调用一样简单。RPC机制使得开发者能够构建分…...
HTTP有哪些请求方式？
GET：请求指定的资源。例如，用于获取网页内容。POST：向指定资源提交数据（例如表单提交）。POST请求的数据通常在请求体中。PUT：将请求体中的数据放置到请求URI指定的位置，如果该资源不存在则创建&…...
接口测试课程结构
课程大纲 如图，接下来的阶段课程，依次专项讲解如下专题，能力级别为中级，进阶后基本为中高级： 1.接口基础知识； 2.抓包工具； 3.接口工具； 4.mock服务搭建（数据模拟服务&am…...
leetcode--从中序与后序遍历序列构造二叉树
leeocode地址：从中序与后序遍历序列构造二叉树 给定两个整数数组 inorder 和 postorder ，其中 inorder 是二叉树的中序遍历， postorder 是同一棵树的后序遍历，请你构造并返回这颗 二叉树 。 示例 1: 输入：inorder …...
西瓜杯CTF(1)
#下班之前写了两个题，后面继续发 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…...
Kafka 典型问题与排查以及相关优化
Kafka 是一个高吞吐量的分布式消息系统，但在实际应用中，用户经常会遇到一些性能问题和消息堆积的问题。本文将介绍 Kafka 中一些典型问题的原因和排查方法，帮助用户解决问题并优化 Kafka 集群的性能。 一、Topic 消息发送慢，并发性…...
C# 策略模式（Strategy Pattern）
策略模式定义了一系列的算法，并将每一个算法封装起来，使它们可以相互替换。策略模式让算法的变化独立于使用算法的客户。 // 策略接口 public interface IStrategy { void Execute(); } // 具体策略A public class ConcreteStrategyA : IStra…...
【初阶数据结构】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.空间复杂…...
（图文详解）小程序AppID申请以及在Hbuilderx中运行
今天小编给大家带来了如何去申请APPID，如果你是小程序的开发者，就必须要这个id。 申请步骤 到小程序注册页面，注册一个小程序账号 微信公众平台 填完信息后提交注册 会在邮箱收到 链接激活账号 确认。邮箱打开链接后，会输入实…...
科技创新引领水利行业升级：深入分析智慧水利解决方案的核心价值，展望其在未来水资源管理中的重要地位与作用
目录 引言 一、智慧水利的概念与内涵 二、智慧水利解决方案的核心价值 1. 精准监测与预警 2. 优化资源配置 3. 智能运维管理 4. 公众参与与决策支持 三、智慧水利在未来水资源管理中的重要地位与作用 1. 推动水利行业转型升级 2. 保障国家水安全 3. 促进生态文明建设…...
ExcelVBA运用Excel的【条件格式】（三）
ExcelVBA运用Excel的【条件格式】（三）前面知识点回顾1. 访问 FormatConditions 集合 Range.FormatConditions2. 添加条件格式 FormatConditions.Add 方法语法表达式。添加 (类型、 运算符、 Expression1、 Expression2)其中 TextOperator:***&am…...
coco数据集格式计算mAP的python脚本
目录 背景说明COCOeval 计算mAPtxt文件转换为coco json 格式自定义数据集标注 背景说明 在完成YOLOv5模型移植，运行在板端后，通常需要衡量板端运行的mAP。 一般需要两个步骤 步骤一：在板端批量运行得到目标检测结果，可保存为yol…...
Linux学习——Linux中无法使用ifconfg命令
Linux学习——Linux中无法使用ifconfg命令？ 💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅…...
二分查找3
1. 有序数组中的单一元素（540） 题目描述： 算法原理： 二分查找解题关键就在于去找到数组的二段性，这里数组的二段性是从单个数字a开始出现然后分隔出来的，如果mid落入左半部分那么当mid为偶数时nums[mid1]…...
从零开始学习嵌入式----C语言框架梳理与后期规划
目录 一、环境搭建. 二、见解 三、C语言框架梳理 四、嵌入式学习规划流程图（学习顺序可能有变） 一、环境搭建. C语言是一门编程语言，在学习的时候要准备好环境。我个人比较喜欢用VS,具体怎么安装请百度。学习C语言的时候，切忌…...
ESP32 步进电机精准控制：打造高精度 DIY 写字机器人，实现流畅书写体验
摘要: 想让你的 ESP32 不再仅仅是控制灯光的工具吗？ 本文将带你使用 ESP32 开发板、步进电机和简单的机械结构打造一个能够自动写字的机器人。我们将深入浅出地讲解硬件连接、软件代码以及控制逻辑，并提供完整的项目代码和电路图，即使是 Ardu…...
传知代码-图神经网络长对话理解(论文复现)
代码以及视频讲解 本文所涉及所有资源均在传知代码平台可获取 概述 情感识别是人类对话理解的关键任务。随着多模态数据的概念，如语言、声音和面部表情，任务变得更加具有挑战性。作为典型解决方案，利用全局和局部上下文信息来预测对话中每…...
部署前端项目
常见部署方式有：静态托管服务、服务器部署 1. 静态托管服务 使用平台部署代码，比如 GitHub。 | 创建一个仓库，仓库名一般是 yourGithubName.github.io。 | 将打包后的静态文件文件上传到仓库。 | 在“Settings”（选项࿰…...
使用POI实现Excel文件的读取(超详细)
目录 一 导入poi相关的maven坐标 二 实现创建并且写入文件 2.1实现步骤 2.2实现代码 2.3效果展示 编辑 2.4注意 三 实现从Excel文件中读取数据 3.1实现步骤 3.2实现代码 3.3结果展示 一 导入poi相关的maven坐标 <!-- Apache poi --><dependency><gro…...
Debezium系列之：记录一次数据库某张表部分数据未同步到hive表的原因
Debezium系列之：记录一次数据库某张表部分数据未同步到hive表的原因 一、背景二、查找数据丢失流程三、数据丢失原因四、解决方法一、背景 反馈mysql数据库中某张表的数据没有同步到hive中，现在需要排查定位下原因数据丢失一般常见需求排查的方向： 数据是否采集到hdfs上采集…...