首页 > 其他分享 >el-button按钮hover悬停限制3秒钟调用1次函数

el-button按钮hover悬停限制3秒钟调用1次函数

时间:2023-10-04 18:32:09浏览次数:45  
标签:el hover 函数 button lastExecTime getSyncStatus now row

使用:elementui、vue

例如:鼠标悬停到按钮上显示视频拉取中,在次悬浮到上面会频繁触发,所以限制3秒显示一次提示

可以使用纯 JavaScript 实现节流效果。以下是示例代码:

  1. 在组件中定义一个变量用于存储最近一次执行函数的时间戳:
export default {
  data() {
    return {
      lastExecTime: 0
    }
  },
  methods: {
    throttleGetSyncStatus(row) {
      const now = Date.now();
      if (now - this.lastExecTime >= 3000) {
        this.getSyncStatus(row);
        this.lastExecTime = now;
      }
    },
    getSyncStatus(row) {
      if (row.syncStatus === 2) {
      	this.$message.info("视频拉取中...");
      }
    },
  }
}
  1. el-button 标签中绑定 mouseenter 事件,同时调用 throttleGetSyncStatus 函数进行节流处理:
<el-button @mouseenter="throttleGetSyncStatus(row)" />

这样就能实现每 3 秒执行一次 getSyncStatus 函数的效果。

标签:el,hover,函数,button,lastExecTime,getSyncStatus,now,row
From: https://blog.51cto.com/u_15694202/7705558

相关文章

  • Sentinel系列之滑动窗口、漏桶代码分析
    1.滑动窗口原理滑动窗口限流算法(SlidingWindow)是对固定窗口算法的一个改进。在滑动窗口算法中,窗口大小仍然是固定的,但它把单位时间周期划分为n个小周期,分别记录每个小周期内请求的数量,根据时间滑动删除过期的小周期。需要注意的是,当请求到达新的周期,才会往前滑动,也就是说滑......
  • Sentinel系列之SlotChain、NodeSelectorSlot、ClusterBuilderSlot分析
    本文基于Sentinel1.8.6版本分析1.SlotChain我们从入口com.alibaba.csp.sentinel.SphU#entry(java.lang.String)开始分析。一路走读下来,会进入到这个方法com.alibaba.csp.sentinel.CtSph#lookProcessChain,查找该资源对应的SlotChain。接下来看如何构建这个SlotChain.Se......
  • 探索化学之秘:PerkinElmer ChemDraw Pro 2022 - 分子结构的视觉盛宴 mac+win版
    PerkinElmerChemDrawPro2022是一款全球领先的化学绘图软件,为全球科研人员、教育工作者以及工业界专业人士提供了直观、高效的工具,以创建、呈现和探索分子结构与化学反应。→→↓↓载PerkinElmerChemDrawPro2022mac/win版一、直观的绘图界面,快速构建分子模型PerkinElmer......
  • "Caused by: java.nio.file.AccessDeniedException: /usr/share/elasticsearch/data/n
    docker-compose搭建elasticsearch出现问题例子如下version:'3'services:elasticsearch:image:elasticsearch:7.14.0container_name:elasticsearchenvironment:-"discovery.type=single-node"-"xpack.sec......
  • 图形学 Cellular Noise
    前言本篇重点如何实现CellularNoise定义CellularNoise基于Voronoi图生成,其外观就像是一个个紧挨着的细胞,因而得名CellularNoise。而Voronoi图的定义是由一组连续多边形组成,多边形的形成由其内部的控制点来控制,按照最邻近原则划分平面,即每个多边形都代表平面上离其内部控制......
  • 搭建Springboot+Vue+Element的简单系统流程
    今天研究了一下如何把Springboot+Mybatis和Vue+Element结合起来使用详细写一篇博客来记录一下流程吧,因为途中发现了很多的问题首先,创建Springboot项目,惯例添加依赖<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="htt......
  • 两种方法获取电话区号,检验我们对Excel基础知识储备的反应能力!
    1职场实例小伙伴们大家好,今天我们专门拿出一个篇幅讲解一下如何在Excel中提取座机电话的区号。如下图所示:是一张各个单位的联系信息,其中的B列为座机电话号码,座机电话号码有一个特点:就是有一个间隔符“-”将一串数字分成了左右两段,左段数字为区号,右段数字为号码。现在我们需要在C列......
  • IntelliJ IDEA 解决连接MYSQL失败问题
    省流版:mysql-connector-java-8.0.13.jar应该出现在下面三个地方:①web-WEB-INF-lib②Database连接时(一般会自动下载)③apache-tomcat-8.0.32-lib 在自己的项目里找到web-WEB-INF-lib,检查一下有没有驱动包  如果没有mysql-connector-java-8.0.13.jar需要下载一个然后在F......
  • hello Flask最简单的Flask项目
    #1、导包fromflaskimportFlask#2、实例化Flask对象。一般变量名都叫app,大家都是这样用,很多扩展插件的文档也是叫app,所以统一都叫app。#__name__是告诉Flask对象当前文件所在的目录就是项目目录。后续的静态文件夹和模板文件都是在基于项目目录下寻找的。app=Flask(__......
  • 记 Laravel Sanctum 实现 token登录
    记LaravelSanctum实现token登录假设已经安装好Laravel安装LaravelSanctum.composerrequirelaravel/sanctumphpartisanvendor:publish--provider="Laravel\Sanctum\SanctumServiceProvider"phpartisanmigrate修改../app/Http/Kernel.phpuseLarave......