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

原来CSS 也可以节流啊

news 2025/7/4 22:53:59

Ⅰ、前言

  • 「节流」 是为了减少请求的触发频率，不让用户点的太快，达到节省资源的目的 ；
  • 通常 我们采用 JS 的 定时器 setTimeout ，来控制点击多少秒才能在触发；
  • 其实 通过 CSS 也能达到 「节流」 的目的，下面我们来看一下把 👇

在这里插入图片描述

Ⅱ、用CSS 节流

1、pointer-events 属性

属性值 ：all / none

  • all : 可以触发该元素绑定的监听事件 ；
  • none : 无法触发绑定的监听事件 ；
<style>.btn {pointer-events: none;}
</style>
<body><button class="btn" onclick="btnClick()"> 按钮 </button>
</body>
<script>function btnClick(){  console.log(123) }
</script>
  • 清楚可以发现事件「无法触发」

既然如此 ，我们可以通过 点击后 动画（animation）, 来设置多少秒后可以触发

2、利用动画实现 节流

  • 通过 active 鼠标点击的时候，清空动画
  • 鼠标松开时，重新启动动画 （2s 以后才能触发 onclick 事件）
<style>.btn {pointer-events: all;animation: btnAnim 2s step-end forwards;}.btn:active {animation: none}   @keyframes btnAnim {from {pointer-events: none;}to {pointer-events: all;}}
</style>
<body><button class="btn" onclick="btnClick()">  按钮 </button>
</body>
<script>function btnClick(){  console.log(123) }
</script>

3、优势和缺陷

优势 ：

  • ① 十分 简单，不需要操作 JS ；
  • ② 可以发挥 CSS 「选择器」 的优势，批量 设置「节流」；

缺点：

  • ① 页面刚进入，也要等动画 （animation）时间；
  • ② 可以通过控制台 ，修改样式，绕过节流 ，所以一些重要的功能，不能使用；

相关文章：

原来CSS 也可以节流啊

Ⅰ、前言 「节流」 是为了减少请求的触发频率&#xff0c;不让用户点的太快&#xff0c;达到节省资源的目的 &#xff1b;通常 我们采用 JS 的 定时器 setTimeout &#xff0c;来控制点击多少秒才能在触发&#xff1b;其实 通过 CSS 也能达到 「节流」 的目的&#xff0c;下面…...

编程日记 2023/3/12 4:41:39

UE官方教程笔记03-功能、术语、操作简介

对官方教程视频[官方培训]03-UE功能、术语、操作简介 | 徐良安 Epic的笔记这一部分基本都是走马观花的简单介绍功能世界创建建模Mesh editingtool是一个全新的建模工具&#xff0c;具备大多数的主流建模软件的核心功能HOUDINI ENGINE FOR UNREALHoudini编辑器&#xff0c;可以用…...

编程日记 2023/3/12 4:40:36

BN,LN,IN,GN的理解和用法

绿色区域表示将该区域作用域(四种方法都贯穿了w,h维度)&#xff0c;即将该区域数值进行归一化&#xff0c;变为均值为0&#xff0c;标准差为1。BN的作用区域时N,W,H,表示一个batch数据的每一个通道均值为0&#xff0c;标准差为1&#xff1b;LN则是让每个数据的所有channel的均值…...

编程日记 2023/3/12 4:39:31

Linux:epoll模式web服务器代码,代码debug

源码&#xff1a; https://blog.csdn.net/weixin_44718794/article/details/107206136 修改的地方&#xff1a; 修改后代码&#xff1a; #include <stdio.h> #include <unistd.h> #include <stdlib.h> //#include “epoll_server.h” #ifndef _EPOLL_SER…...

编程日记 2023/3/12 4:38:27

SpringSecurity学习（四）密码加密、RememberMe记住我

文章目录密码加密一、简介密码为什么要加密常见的加密解决方案PasswordEncoder详解DelegatingPasswordEncoder二、自定义加密方式1. 使用灵活的密码加密方案&#xff08;BCryptPasswordEncoder&#xff09;加密验证&#xff08;推荐&#xff09;需要在密码前指定加密类型{bcryp…...

编程日记 2023/3/12 4:37:22

vue专项练习

一、循环实现一个列表的展示及删除功能 1.1 列表展示 1、背景&#xff1a; 完成一个这样的列表展示。使用v-for 循环功能 id接口名称测试人员项目名项目ID描述信息创建时间用例数1首页喵酱发财项目a1case的描述信息2019/11/6 14:50:30102个人中心张三发财项目a1case的描述信…...

编程日记 2023/3/12 4:36:17

【笔试题】百度+美团

发工资 链接&#xff1a;https://www.nowcoder.com/questionTerminal/e47cffeef25d43e3b16c11c9b28ac7e8 来源&#xff1a;牛客网 小度新聘请了一名员工牛牛, 每个月小度需要给牛牛至少发放m元工资(给牛牛发放的工资可以等于m元或者大于m元, 不能低于m)。 小度有一些钞票资金…...

编程日记 2023/3/12 4:35:11

【8.索引篇】

索引分类 索引和数据就是位于存储引擎中&#xff1a; 按「数据结构」分类&#xff1a;Btree索引、Hash索引、Full-text索引。按「物理存储」分类&#xff1a;聚簇索引&#xff08;主键索引&#xff09;、二级索引&#xff08;辅助索引&#xff09;。按「字段特性」分类&#…...

编程日记 2023/3/12 4:34:02

MySQL InnoDB存储引擎锁与事务实现原理解析（未完成）

InnoDB MySQL存储引擎是基于表的&#xff0c;也就是说每张表可以选择不同的存储引擎。 InnoDB存储引擎的表是索引组织的&#xff0c;也就是数据即索引。 存储引擎文件 InnoDB引擎会包含RedoLog重做日志文件和TableSpace表空间文件。 表空间文件 默认表空间文件&#xff08…...

编程日记 2023/3/12 4:32:55

P1683 入门（洛谷）JAVA

题目描述&#xff1a; 不是任何人都可以进入桃花岛的&#xff0c;黄药师最讨厌像郭靖一样呆头呆脑的人。所以&#xff0c;他在桃花岛的唯一入口处修了一条小路&#xff0c;这条小路全部用正方形瓷砖铺设而成。有的瓷砖可以踩&#xff0c;我们认为是安全的&#xff0c;而有的瓷砖…...

编程日记 2023/3/12 4:30:44

yocto编译烧录和脚本解析

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、初始化构建目录二、imx-setup-release.sh脚本解析三、编译单独编译内核四、烧录总结前言 本篇文章主要讲解如何在下载好源码之后进行编译和yocto的脚本解析…...

编程日记 2023/3/12 4:29:41

Proteus 8.15安装包安装教程

Proteus介绍Proteus的介绍Proteus8.15安装包Proteus8.15安装教程Proteus的介绍 Proteus是英国著名的EDA工具(仿真软件)&#xff0c;从原理图布图、代码调试到单片机与外围电路协同仿真&#xff0c;一键切换到PCB设计&#xff0c;真正实现了从概念到产品的完整设计。是世界上唯…...

编程日记 2023/3/12 4:28:39

Spring——AOP工作流程

AOP就是代理模式的开发简化 1.Spring容器启动 因为AOP是要将通知类作为一个bean对象交给spring进行管理的&#xff0c;还有经过通知类被增强的类。 此时还没有创建bean对象 2.读取所有切面配置中的切入点 在下面这段代码中&#xff0c;定义了两个切入点&#xff0c;但是只…...

编程日记 2023/3/12 4:27:34

c++11多线程之condition_variable、wait()、notify_one()、notify_all()的使用。

系列文章目录 文章目录系列文章目录前言一、基本概念1.1 std::condition_variable1.2 wait()函数1.2.1 wait()带第二个参数1.2.2 wait()不带第二个参数1.2.3 当其他线程用notify_one()或notify_all&#xff08;&#xff09;1.3 notify函数二、代码实例总结前言 C11多线程&…...

编程日记 2023/3/12 4:25:17

skywalking扩展实现 —— 监控数据的动态上报

把标题名整高大上一些&#xff0c;来掩盖需求的奇葩。 0. 目录1. 需求背景2. 需求描述3. 优势4. 实现4.1 扩展点4.2 配置项5. 优化6. 提醒7. 补充 - 关于微服务8. 参考1. 需求背景 过去一段时间&#xff0c;接手了一个迭代了数年的"基于微服务架构"搭建的产品。 自…...

编程日记 2023/3/12 4:23:08

【GoF 23】23种设计模式与OOP七大原则概述

1. 什么是GoF 23&#xff1f; GoF 23也就是23种设计模式。1995年GoF&#xff08;Gang of Four&#xff0c;四人组/四人帮&#xff09;合作出版了《设计模式&#xff1a;可复用面向对象软件的基础》一书&#xff0c;一共收录了23种设计模式&#xff0c;从此梳理了软件设计模式领…...

编程日记 2023/3/12 4:18:33

Java 日期时间

Java 日期时间是 Java 标准库中一个非常重要的部分&#xff0c;它提供了丰富的 API 来处理日期、时间以及日期时间。在 Java 应用程序中&#xff0c;我们经常需要处理日期时间相关的操作&#xff0c;例如计算两个日期之间的差、将日期时间转换为不同的时区等。在本篇文章中&…...

编程日记 2023/3/12 4:10:44

Face Forgery Suvery

文章目录Face ForgeryFace Forgery classAttribute ManipulationExpression SwapIdentity SwapEntire Face SynthesisFace Forgery DetectionLow-levelOn the Detection of Digital Face Manipulation(CVPR2020)High-levelProtecting World Leaders Against Deep FakesDetectin…...

编程日记 2023/3/12 4:08:26

案例学习--016 消息队列作用和意义

简介MQ全称为Message Queue, 是一种分布式应用程序的的通信方法&#xff0c;它是消费-生产者模型的一个典型的代表&#xff0c;producer往消息队列中不断写入消息&#xff0c;而另一端consumer则可以读取或者订阅队列中的消息。主要产品有&#xff1a;ActiveMQ、RocketMQ、Rabb…...

编程日记 2023/3/12 4:07:22

【MySQL】MySQL的锁机制

目录 概述 MyISAM 表锁 InnoDB行锁 概述 锁是计算机协调多个进程或线程并发访问某一资源的机制&#xff08;避免争抢&#xff09;。 在数据库中&#xff0c;除传统的 计算资源&#xff08;如 CPU、RAM、I/O 等&#xff09;的争用以外&#xff0c;数据也是一种供许多用户共…...

编程日记 2023/3/12 4:06:19

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/7/1 12:27:16

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/6/27 9:51:25

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/6/16 20:22:52

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/7/4 3:04:32

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/6/21 8:18:07

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/6/16 13:45:11

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/7/4 0:06:58

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/6/15 16:44:42

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

编程新知 2025/6/21 22:57:31

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

编程新知 2025/6/25 12:03:49