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. 促进生态文明建设…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
leetcodeSQL解题：3564. 季节性销售分析
leetcodeSQL解题：3564. 季节性销售分析 题目： 表：sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
企业如何增强终端安全？
在数字化转型加速的今天，企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机，到工厂里的物联网设备、智能传感器，这些终端构成了企业与外部世界连接的 “神经末梢”。然而，随着远程办公的常态化和设备接入的爆炸式…...
2023赣州旅游投资集团
单选题 1.“不登高山，不知天之高也；不临深溪，不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作 传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性 本论文优点：（1）在ALOHA…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时，遇到的一些问题总结一下 [参考文档]：https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现： 今天在看到这个教程的时候，在自己的电…...
论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving
地址：LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂，正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的，启动是正常的， 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...