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

15 # 手写 throttle 节流方法

news 2026/4/15 6:13:13

什么是节流

节流是限制事件触发的频率，当持续触发事件时，在一定时间内只执行一次事件，这个效果跟英雄联盟里的闪现技能释放差不多。

函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。

间隔一段时间执行一次回调的场景有：

  • 滚动加载，加载更多或滚到底部监听
  • 谷歌搜索框，搜索联想功能
  • 高频点击提交，表单重复提交
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>节流</title><script src="https://cdn.bootcdn.net/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head><body><div>普通输入框：<input class="input1" /></div><div>节流输入框：<input class="input2" /></div><script>// 普通const inputEl1 = document.querySelector(".input1");let counter1 = 1;inputEl1.oninput = function () {console.log(`发送网络请求${counter1++}`, this.value);};// 节流处理过的const inputEl2 = document.querySelector(".input2");let counter2 = 1;inputEl2.oninput = _.throttle(function () {console.log(`节流处理：发送网络请求${counter2++}`, this.value);}, 1000);</script>
</body></html>

在这里插入图片描述

手写 throttle

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>手写节流</title><script>// 时间戳实现节流function kaimoThrottle(fn, delay) {let startTime = 0;let _throttle = function (...args) {let now = new Date().getTime();let waitTime = delay - (now - startTime);if (waitTime <= 0) {fn.apply(this, args);startTime = now;}}return _throttle;}// setTimeout 实现节流function kaimoThrottle2(fn, delay) {let timer = null;let _throttle = function (...args) {// 如果 timer 不为 null，说明上一个定时器还未执行，则直接返回if (timer) {return;}// 开启新的一个定时器timer = setTimeout(() => {// this 和参数绑定fn.apply(this, args);// 函数执行完之后，将timer置为nulltimer = null;}, delay);};return _throttle;}</script>
</head><body><div>节流输入框：<input class="input" /></div><script>const inputEl = document.querySelector(".input");let counter = 1;inputEl.oninput = kaimoThrottle2(function (e) {console.log(`手写节流：发送网络请求${counter++}`, this, this.value);console.log(e);}, 1000);</script>
</body></html>

在这里插入图片描述

相关文章：

15 # 手写 throttle 节流方法

什么是节流 节流是限制事件触发的频率&#xff0c;当持续触发事件时&#xff0c;在一定时间内只执行一次事件&#xff0c;这个效果跟英雄联盟里的闪现技能释放差不多。 函数防抖关注一定时间连续触发的事件只在最后执行一次&#xff0c;而函数节流侧重于一段时间内只执行一次…...

编程日记 2023/11/12 2:36:42

puzzle（1612）拼单词、wordlegame

目录 拼单词 wordlegame 拼单词 在线play 找出尽可能多的单词。 如果相邻的话&#xff08;在任何方向上&#xff09;&#xff0c;你可以拖拽鼠标从一个字母&#xff08;方格&#xff09;到另一个字母&#xff08;方格&#xff09;。在一个单词中&#xff0c;你不能多次使用…...

编程日记 2023/11/12 2:35:41

【解决方案】pytion 运行时提示 import psutil ModuleNotFoundError: No module named ‘psutil‘

报错原因分析 import psutil ModuleNotFoundError: No module named psutil报错原因分析 当前环境pytion中缺少了psutil包&#xff0c;使用pip命令进行安装 解决方案 pip install psutil...

编程日记 2023/11/12 2:34:40

CSS3 过度效果、动画、多列

一、CSS3过度&#xff1a; CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点&#xff0c;必须规定两相内容&#xff1a;指定要添加效果的CSS属性&#xff1b;指定效果的持续时间。如果为指定持续时间&#xff0c;transition将没有任何效果。 <style> div…...

编程日记 2023/11/12 2:33:39

java使用geotools解析矢量数据kml、geojson、shp文件

geotools解析kml、geojson geotools环境准备公共获取属性方法解析kml解析geojson解析shp geotools环境准备 这里使用的是maven引用geotools包&#xff0c;引用geotools包需要添加maven仓库&#xff0c;pom.xml文件如下&#xff1a; <properties><!-- geotools版本 -…...

编程日记 2023/11/12 2:32:36

原生 JS DOM 常用操作大全

DOM DOM文档对象模型 又称为DOM树 DOM树 由文档、元素、节点 组成文档&#xff1a;一个页面就是一个文档&#xff0c;元素&#xff1a;文档中的所有标签都称为元素。DOM中使用Element表示节点&#xff1a;文档中的所有内容&#xff0c;在文档中都是节点&#xff08;标签、属性…...

编程日记 2023/11/12 2:31:34

昇腾CANN 7.0 黑科技：DVPP硬件加速训练数据预处理，友好解决Host CPU预处理瓶颈

在NPU/GPU上进行模型训练计算&#xff0c;为了充分使用计算资源&#xff0c;一般采用批量数据处理方式&#xff0c;因此一般情况下为提升整体吞吐率&#xff0c;batch值会设置的比较大&#xff0c;常见的batch数为256/512&#xff0c;这样一来&#xff0c;对数据预处理处理速度…...

编程日记 2023/11/12 2:30:33

Aria2 任意文件写入漏洞复现

漏洞描述 Aria2 是一款轻量级、多协议、多源下载工具&#xff08;支持 HTTP/HTTPS、FTP、BitTorrent、Metalink&#xff09;&#xff0c;内置 XML-RPC 和 JSON-RPC 接口。 我们可以使用 RPC 接口来操作 aria2 并将文件下载到任意目录&#xff0c;从而造成任意文件写入漏洞。 …...

编程日记 2023/11/12 2:29:32

思维模型 多看效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。越熟悉&#xff0c;越喜欢。 1 多看效应的应用 1.1 多看效应在广告和营销领域的应用 1 可口可乐之歌 可口可乐公司在 20 世纪 60 年代推出了“可口可乐之歌”广告&#xff0c;这个广告通…...

编程日记 2023/11/12 2:28:31

持续集成交付CICD：Jenkins Pipeline与远程构建触发器

目录 一、实验 1.Jenkins Pipeline本地构建触发器 2.Jenkins Pipeline与远程构建触发器&#xff08;第一种方式&#xff09; 3.Jenkins Pipeline与远程构建触发器&#xff08;第二种方式&#xff09; 4.Jenkins Pipeline与远程构建触发器&#xff08;第三种方式&#xff0…...

编程日记 2023/11/12 2:27:30

【无标题(PC+WAP)花卉租赁盆栽绿植类pbootcms站模板

(PCWAP)花卉租赁盆栽绿植类pbootcms网站模板 PbootCMS内核开发的网站模板&#xff0c;该模板适用于盆栽绿植网站等企业&#xff0c;当然其他行业也可以做&#xff0c;只需要把文字图片换成其他行业的即可&#xff1b; PCWAP&#xff0c;同一个后台&#xff0c;数据即时同步&…...

编程日记 2023/11/12 2:25:28

pytorch 学习率衰减策略

##学习率衰减策略 import torch.nn.functional as F import torch import torch.nn as nn import matplotlib.pyplot as plt#初始化模型 class Net(nn.Module):def __init__(self):super(Net, self).__init__()self.conv1 = nn.Conv2d(1, 10, kernel_size=5)self.conv2 = nn.Co…...

编程日记 2023/11/12 2:24:28

Flink SQL -- 概述

1、Flink SQL中的动态表和连续查询 1、动态表&#xff1a; 因为Flink是可以做实时的&#xff0c;数据是在不断的变化的&#xff0c;所以动态表指的是Flink中一张实时变换的表&#xff0c;表中会不断的有新的数据。但是这张表并不是真正的物理表。 2、连续查询&#xff1a; 连续…...

编程日记 2023/11/12 2:23:26

Spring RabbitMQ那些事（1-交换机配置消息发送订阅实操）

目录 一、序言二、配置文件application.yml三、RabbitMQ交换机和队列配置1、定义4个队列2、定义Fanout交换机和队列绑定关系2、定义Direct交换机和队列绑定关系3、定义Topic交换机和队列绑定关系4、定义Header交换机和队列绑定关系 四、RabbitMQ消费者配置五、RabbitMQ生产者六…...

编程日记 2023/11/12 2:22:25

C++动态库

C动态库 动态库文件&#xff08;Dynamic Link Library&#xff0c;DLL&#xff09;是程序在运行时所需要调用的库。静态库文件是程序在编译时所需要调用的库。 1 环境介绍 VS版本&#xff1a;VS2017 编程语言&#xff1a;C 2 功能介绍 使用VS2017项目模板创建C动态库生成…...

编程日记 2023/11/12 2:21:24

【教3妹学编程-算法题】2923. 找到冠军 I

3妹&#xff1a;2哥2哥&#xff0c;你看到新闻了吗&#xff1f;襄阳健桥医院院长 公然“贩卖出生证明”&#xff0c; 真是太胆大包天了吧。 2哥 : 我也看到新闻了&#xff0c;7人被采取刑事强制措施。 就应该好好查查他们&#xff0c; 一查到底&#xff01; 3妹&#xff1a;真的…...

编程日记 2023/11/12 2:20:23

矢量图形编辑软件Boxy SVG mac中文版软件特点

Boxy SVG mac是一款基于Web的矢量图形编辑器&#xff0c;它提供了一系列强大的工具和功能&#xff0c;可帮助用户创建精美的矢量图形。Boxy SVG是一款好用的软件&#xff0c;并且可以在Windows、Mac和Linux系统上运行。 Boxy SVG mac软件特点 简单易用&#xff1a;Boxy SVG的用…...

编程日记 2023/11/12 2:19:22

神经网络遗传算法函数极值寻优

大家好&#xff0c;我是带我去滑雪&#xff01; 对于未知的非线性函数&#xff0c;仅仅通过函数的输入和输出数据难以寻找函数极值&#xff0c;这一类问题可以通过神经网络结合遗传算法求解&#xff0c;利用神经网络的非线性拟合能力和遗传算法的非线性寻优能力寻找函数极值。 …...

编程日记 2023/11/12 2:17:19

剑指JUC原理-16.读写锁

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码&#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&…...

编程日记 2023/11/12 2:16:18

文件改名：避免繁琐操作，利用筛选文件批量重命名技巧优化文件管理

在我们的日常生活和工作中&#xff0c;我们经常需要处理大量的文件&#xff0c;从文档、图片到音频和视频等。在这些情况下&#xff0c;一个高效的文件管理策略至关重要。文件重命名的必要性主要体现在两个方面。首先&#xff0c;对于大量文件&#xff0c;手动进行重命名不仅费…...

编程日记 2023/11/12 2:15:17

150ms端到端延迟！手把手教你将Fun-CosyVoice 3.0集成到实时对话应用（附Python/Streamlit代码）

150ms端到端延迟实战&#xff1a;Fun-CosyVoice 3.0实时对话系统集成指南 当数字人客服的语音响应迟滞超过300ms&#xff0c;用户满意度会下降40%——这是我们在医疗咨询机器人项目中验证过的数据。今天要分享的&#xff0c;是如何用Fun-CosyVoice 3.0构建端到端延迟控制在150m…...

编程新知 2026/4/15 5:54:09

超级智能太过单一！菲尔兹奖得主陶哲轩首提“哥白尼式智能观”：人类智能和AI各有好坏，最会用AI的往往是会“带人”的人

在真实世界中&#xff0c;AI究竟是什么&#xff1f;人类智能又是什么&#xff1f;它们之间有着什么样的关系&#xff1f;近日&#xff0c;“越来越关注如何利用 AI 和其他现代技术来重塑数学&#xff0c;甚至是整个科学体系”的菲尔兹奖得主Terence Tao&#xff08;陶哲轩&…...

编程新知 2026/4/15 5:39:40

2026奇点大会闭门报告流出：图像描述生成正面临“语义坍缩”危机，这4类业务场景已触发告警

第一章&#xff1a;2026奇点智能技术大会&#xff1a;图像描述生成 2026奇点智能技术大会(https://ml-summit.org) 核心任务与技术演进 图像描述生成&#xff08;Image Captioning&#xff09;在2026奇点智能技术大会上被确立为多模态理解的关键落地范式。本届大会展示的最新…...

编程新知 2026/4/15 5:20:30

FPGA以太网调试笔记：避开SGMII+GTX配置里的两个‘坑’（MDIO与多端口时钟）

FPGA以太网调试实战&#xff1a;破解SGMIIGTX配置中的MDIO与时钟难题 调试FPGA以太网接口时&#xff0c;SGMII与GTX的配置往往成为工程师的"拦路虎"。我曾在一个四端口千兆以太网项目中&#xff0c;连续48小时被两个看似简单的问题困扰&#xff1a;MDIO配置导致的链路…...

编程新知 2026/4/15 2:41:52

阿里系bx-ua补环境实战：从零到一构建可用的Node.js执行环境

1. 为什么需要补环境&#xff1a;bx-ua加密的特殊性 阿里系bx-ua加密算法在设计上有一个显著特点&#xff1a;它会深度检测代码运行环境。简单来说&#xff0c;这段加密代码会在执行时"四处张望"&#xff0c;检查自己是否运行在真实的浏览器环境中。我在实际项目中遇…...

编程新知 2026/4/15 2:37:45

KV260 视觉 AI 套件实战--从零部署到网络互联（Ubuntu+SSH）

1. KV260视觉AI套件开箱初体验 第一次拿到KV260视觉AI套件时&#xff0c;给我的感觉就像收到了一台迷你工作站。这个巴掌大的开发板搭载了Xilinx的Zynq UltraScale MPSoC芯片&#xff0c;集成了四核ARM Cortex-A53处理器和可编程逻辑单元&#xff0c;专为边缘AI视觉应用设计。套…...

编程新知 2026/4/15 1:58:47

2025最权威的十大降AI率方案实际效果

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 就维普系统检测 AI 生成内容的问题而言&#xff0c;可借助以下策略切实降低识别率。其一&…...

编程新知 2026/4/15 0:52:14

Windows环境下IDEA集成Java与Protobuf的高效开发指南

1. 环境准备&#xff1a;Protobuf与IDEA的安装配置 在Windows系统下搭建Java与Protobuf的开发环境&#xff0c;就像组装一台高性能电脑——每个部件都要选对型号、正确安装。我经历过无数次环境配置的翻车现场&#xff0c;这里把最稳妥的配置方案分享给你。 首先去Protobuf的…...

编程新知 2026/4/15 0:33:40

手把手教学：用THE LEATHER ARCHIVE快速生成高级感皮革时尚图片

手把手教学&#xff1a;用THE LEATHER ARCHIVE快速生成高级感皮革时尚图片 关键词&#xff1a;AI时尚设计、皮革穿搭、AI图片生成、时尚杂志风格、一键部署 摘要&#xff1a;本文详细介绍如何使用THE LEATHER ARCHIVE镜像快速生成具有高级感的皮革时尚图片。从环境准备到实际生…...

编程新知 2026/4/14 23:40:20

数字孪生赋能智慧校园：三维可视化运维检测平台的创新实践

1. 数字孪生如何重塑智慧校园管理 第一次看到浙江工商大学的数字孪生校园平台时&#xff0c;我完全被震撼到了——整个校园的每栋建筑、每条道路甚至每棵树都以三维形式精确还原在屏幕上&#xff0c;实时数据像血液一样在虚拟校园中流动。这种技术正在彻底改变传统校园管理模式…...

编程新知 2026/4/14 23:34:18