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. 促进生态文明建设…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来
一、破局：PCB行业的时代之问 在数字经济蓬勃发展的浪潮中，PCB（印制电路板）作为 “电子产品之母”，其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透，PCB行业面临着前所未有的挑战与机遇。产品迭代…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...
如何理解 IP 数据报中的 TTL？
目录 前言理解 前言 面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...
深度学习习题2
1.如果增加神经网络的宽度，精确度会增加到一个特定阈值后，便开始降低。造成这一现象的可能原因是什么？ A、即使增加卷积核的数量，只有少部分的核会被用作预测 B、当卷积核数量增加时，神经网络的预测能力会降低 C、当卷…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣（LeetCode） 思路 右视图是指从树的右侧看，对于每一层，只能看到该层最右边的节点。实现思路是： 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
Mysql8 忘记密码重置，以及问题解决
1.使用免密登录 找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建
【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...