节流还在用JS吗?CSS也可以实现哦

函数节流是一个我们在项目开发中常用的优化手段,可以有效避免函数过于频繁的执行。一般函数节流用在scroll页面滚动,鼠标移动等。

为什么需要节流呢,因为触发一次事件就会执行一次事件,这样就形成了大量操作dom,会出现卡顿的情况。

一、传统JS节流实现方式

   /* 1.时间戳实现 */
    function throttle(func, delay) {
      let prev = 0
      return function(...args){
        let now = new Date()
        if(now - prev > delay){
          prev = new Date()
          func.apply(this, args)
        }
      }
    }

    /* 定时器实现 */
    function throttle(func, delay) {
      let timer = null
      return function(...args) {
        if(!timer){
          timer = setTimeout(() => {
            timer = null
            func.apply(this, args)
          },delay)
        }
      }
    }

二、CSS实现
1.实现思路

我们可以使用css的pointer-events禁用点击事件对事件进行控制。
使用animation设置禁用时间,对时间进行限制。
使用:active点击行为作为触发时机

可以这样理解,一个CSS动画从禁用可点击的变化,每次点击时让这个动画重新执行一遍,在整个执行过程设置的时间范围内一直处于禁用的状态,这是不是就有点像节流的功能。

2.具体实现
假设一个按钮,连续点击按钮就会一直触发事件。

<button onclick="console.log('111')">点击按钮</button>

在这里插入图片描述
使用pointer-events实现一个动画,从禁用到可点击。

 @keyframes throttle {
    from {
      color: green;
      pointer-events: none;
    }
    to {
      color: black;
      pointer-events: all;
    }
  }
  button {
    animation: throttle 3s step-end forwards;
  }
  button:active {
    animation: none;
  }

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/1684.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode:35. 搜索插入位置

&#x1f34e;道阻且长&#xff0c;行则将至。&#x1f353; &#x1f33b;算法&#xff0c;不如说它是一种思考方式&#x1f340;算法专栏&#xff1a; &#x1f449;&#x1f3fb;123 一、&#x1f331;35. 搜索插入位置 题目描述&#xff1a;给定一个排序数组和一个目标值&…

CentOS8服务篇10:FTP服务器配置与管理

一、安装与启动FTP服务器 1、安装VSFTP服务器所需要的安装包 #yum -y install vsftpd 2、查看配置文件参数 Vim /etc/vsftpd/vsftpd.conf &#xff08;1&#xff09;是否允许匿名登录 anonymous_enableYES 该行用于控制是否允许匿名用户登录。 &#xff08;2&…

年报前瞻:文化产业高质量发展确定性,关注腾讯音乐三大关键能力

港股进入年报季&#xff0c;今年的披露期拥有比往年更多的看点。 一方面&#xff0c;经济复苏态势明显&#xff0c;线上线下消费均有回暖&#xff0c;市场已经对去年的整体表现有更多预期&#xff0c;正关注企业对后续发展的思考&#xff1b;另一方面&#xff0c;两会结束&…

2023美赛C题【分析思路+代码】

以下内容为我个人的想法与实现&#xff0c;不代表任何其他人。 文章目录问题一数据预处理时间序列模型创建预测区间单词的任何属性是否影响报告的百分比&#xff1f;如果是&#xff0c;如何影响&#xff1f;如果不是&#xff0c;为什么不是&#xff1f;问题二问题三难度评估模型…

【Vue3】利用vite创建vue3项目

&#x1f3c6;今日学习目标&#xff1a;利用vite创建vue3项目 &#x1f603;创作者&#xff1a;颜颜yan_ ✨个人格言&#xff1a;生如芥子&#xff0c;心藏须弥 ⏰本期期数&#xff1a;第二期 &#x1f389;专栏系列&#xff1a;Vue3 文章目录前言vite简介利用vite创建vue3项目…

二叉搜索树

1.基础概念介绍 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树: 1.若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 2.若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值 3.它…

设置Typora图床(Github)

PicGo&#xff0c;Github&#xff0c;Typora Nodejs下载&#xff1a; Node.js PicGo下载&#xff1a; GitHub - Molunerfinn/PicGo: A simple & beautiful tool for pictures uploading built by vue-cli-electron-builder 选择downloads或release. 然后进行安装。 Gith…

经典PID控制算法原理以及优化思路

文章目录0、概念1、理解2、实现3、优化4、引用0、概念 PID算法是工业应用中最广泛算法之一&#xff0c;在闭环系统的控制中&#xff0c;可自动对控制系统进行准确且迅速的校正。PID控制&#xff0c;即Proportional – Integral(I) – Derivative(D) Control, 实际上是三种反馈…

Transformer到底为何这么牛

从注意力机制&#xff08;attention&#xff09;开始&#xff0c;近两年提及最多的就是Transformer了&#xff0c;那么Transformer到底是什么机制&#xff0c;凭啥这么牛&#xff1f;各个领域都能用&#xff1f;一文带你揭开Transformer的神秘面纱。 目录 1.深度学习&#xff0…

STM32外设-DMA

1. 简介 DMA(Direct Memory Access)—直接存储器存取&#xff0c;是单片机的一个外设&#xff0c;它的主要功能是用来搬数据&#xff0c;但是不需要占用 CPU&#xff0c;即在传输数据的时候&#xff0c; CPU 可以干其他的事情&#xff0c;好像是多线程一样。数据传输支持从外设…

初时STM32单片机

目录 一、单片机基本认知 二、STM系列单片机命名规则 三、标准库与HAL库区别 四、通用输入输出端口GPIO 五、推挽输出与开漏输出 六、复位和时钟控制&#xff08;RCC&#xff09; 七、时钟控制 八、中断和事件 九、定时器介绍 一、单片机基本认知 单片机和PC电脑相比…

【python进阶】你真的懂元组吗?不仅是“不可变的列表”

&#x1f4da;引言 &#x1f64b;‍♂️作者简介&#xff1a;生鱼同学&#xff0c;大数据科学与技术专业硕士在读&#x1f468;‍&#x1f393;&#xff0c;曾获得华为杯数学建模国家二等奖&#x1f3c6;&#xff0c;MathorCup 数学建模竞赛国家二等奖&#x1f3c5;&#xff0c…

图形视图框架 事件处理(item)

在图形界面框架中的事件都是先由视图进行接收&#xff0c;然后传递给场景&#xff0c;再由场景传递给图形项。通过键盘处理的话&#xff0c;需要设置焦点&#xff0c;在QGraphicsScene中使用setFoucesItem&#xff08;&#xff09;函数可以设置焦点&#xff0c;或者图形项使用s…

【二】一起算法---队列:STL queue、手写循环队列、双端队列和单调队列、优先队列

纸上得来终觉浅&#xff0c;绝知此事要躬行。大家好&#xff01;我是霜淮子&#xff0c;欢迎订阅我的专栏《算法系列》。 学习经典算法和经典代码&#xff0c;建立算法思维&#xff1b;大量编码让代码成为我们大脑的一部分。 ⭐️已更系列 1、基础数据结构 1.1、链表➡传送门 1…

【文心一言】什么是文心一言,如何获得内测和使用方法。

文心一言什么是文心一言怎么获得内测资格接下来就给大家展示一下文学创作商业文案创作数理逻辑推算中文理解多模态生成用python写一个九九乘法表写古诗前言&#xff1a; &#x1f3e0;个人主页&#xff1a;以山河作礼。 &#x1f4dd;​&#x1f4dd;:本文章是帮助大家了解文心…

24. linux系统基础

两个进程间想通讯&#xff0c;必须要通过内核&#xff0c;今天讲的信号其实本质也是讲进程间通讯的意思&#xff0c;那么你为什么可以在shell环境下&#xff0c;可以和一个进程发kill-9啊&#xff1f; shell是不是相当于一个进程&#xff1f;你自己运行的那个进程是不是也相当于…

HTTPS 加密协议

✏️作者&#xff1a;银河罐头 &#x1f4cb;系列专栏&#xff1a;JavaEE &#x1f332;“种一棵树最好的时间是十年前&#xff0c;其次是现在” 目录HTTPS"加密" 是什么HTTPS 的工作过程引入证书HTTPS http 安全层 (SSL) SSL 用来加密的协议&#xff0c;也叫 TLS …

GPT-4 API 接口调用及价格分析

GPT-4 API 接口调用及价格分析 15日凌晨&#xff0c;OpenAI发布了万众期待的GPT-4&#xff01;新模型支持多模态&#xff0c;具备强大的识图能力&#xff0c;并且推理能力和回答准确性显著提高。在各种专业和学术基准测试上的表现都媲美甚至超过人类。难怪OpenAI CEO Sam Altm…

HiveSql一天一个小技巧:利用array_contains()函数进行容器存在性计数问题分析

0 需求描述文章被引用关系数据表如下&#xff1a;idoid10203141526073其中id表示文章id,oid引用的文章&#xff0c;当oid为0时表示当前文章为原创文章&#xff0c;求原创文章被引用的次数。注意本题不能用关联的形式求解1 需求分析1.1 数据源准备with data as( select 1 as id,…

Springboot源代码总结

前言 编写微服务,巩固知识 文章目录 前言springboot原理springboot启动流程SpringBoot自动配置底层源码解析自动配置到底配了什么?自动配置类条件注解Starter机制@ConditionalOnMissingBeanSpringBoot启动过程源码解析构造SpringApplication对象SpringBoot完整的配置优先级s…