实现节流防止连点方法以及调用方式

1、新建throttle.js文件,复制该代码

export function throttle(fn, delay) {
    let latestTime = 0
    return function() {
        const _this = this
        const _arguments = arguments
        const nowTime = new Date().getTime()

        if (nowTime - latestTime > delay) {
            fn.apply(_this, _arguments)
            latestTime = nowTime
        } else {
            this.$util.Tips({
                title: `点击次数过高,请${Math.ceil((delay - (nowTime - latestTime)) / 1000)}秒后再次尝试!`
            })
        }
    }

}

2.调用方式

vue文件中引入

import {throttle} from "路径"

<button @click="btnFnc"><button/>

btnFnc: throttle(function() {
                this.antiShakeBtn()
            }, 2000),

            antiShakeBtn() {
               此方法是处理接口或者逻辑等等
            },

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

定制 Elasticsearch 镜像

安装ik分词器 下载ik分词器 下载地址&#xff1a;https://github.com/infinilabs/analysis-ik/releases Dockerfile FROM docker.elastic.co/elasticsearch/elasticsearch:8.12.2 COPY ./elasticsearch-analysis-ik-8.12.2.zip /opt/ RUN bin/elasticsearch-plugin instal…

IOS面试题编程机制 16-20

16. 详述iOS 中的事件的传递:响应链?事件沿着一个指定的路径传递直到它遇见可以处理它的对象。 首先一个UIApplication 对象从队列顶部获取一个事件并分发(dispatches)它以便处理。 通常,它把事件传递给应用程序的关键窗口对象,该对象把事件传递给一个初始对象来处理。 初始…

国产DSP FT-M6678开发-网络开发

简介 今天准备调试FT-M6678的网络部分,参考例程是《3. FT-M6678 Project\1. FT-M6678 接口驱动函数\13. GMAC\NDK 协议栈工程-V7.1\03应用例程\UDP\DSP端应用程序\DSP_UDP_Test_V7》,首先参照文档将NDK使用官方提供的NDK进行替换: 将D:\ti\pdk_C667…

FMEA助力新能源汽车行业腾飞:安全、效率双提升

随着新能源汽车市场的迅猛发展&#xff0c;各大车企纷纷加大研发力度&#xff0c;力求在激烈的市场竞争中脱颖而出。其中&#xff0c;FMEA&#xff08;故障模式与影响分析&#xff09;作为一种先进的质量管理工具&#xff0c;正被越来越多地应用于新能源汽车的研发和生产过程中…

Redis中的常用数据结构

目录 String类型 Hash类型 List类型 Set类型 SortedSet类型 全局命令 集合中的交并补 String类型 //set,get型set key valueget key//设置一个10s后过期的键值对 ex单位是sset key value ex 10 或者 setex key 10 value//设置一个10ms后过期的键值对 px单位是msset key…

Vue 面试题(二)

目录 上一篇:Vue 常见面试题(一)-CSDN博客 11、Vue 组件 data 为什么必须是函数&#xff08;必会&#xff09; 12、讲一下组件的命名规范&#xff08;必会&#xff09; 13、怎么在组件中监听路由参数的变化&#xff1f;&#xff08;必会&#xff09; 14、怎么捕获 Vue 组件…

深度学习pytorch——链式法则(Chain rule)(持续更新)

这篇文章将会以深度学习的角度解析链式法则。 基本的求导法则 高中的时候就学过&#xff0c;大学高数也巩固了一遍&#xff0c;这里不再赘述。 深度学习中的链式法则 为什么要讲述深度学习中的链式法则&#xff1f; 通过链式法则&#xff0c;我们可以得到中间层信息&#x…

unbantu Apache的基本配置与配置静态资源访问

目录 前言: 1.Apache介绍 2.安装Apache 3. 测试Apache服务是否启动成功 3.1配置Servername 3.2重启服务 4.配置Apache主页面 5. 配置静态的资源 6.为静态资源设置访问权限(基于源地址) 致谢: 前言: 此博客是基于unbantu的Apache服务的详细解析&#xff0c;在这片博…

Elasticsearch面试系列-03

1. Elasticsearch 中 refresh 和 flush 有什么区别? 整体流程: 1、数据写入buffer缓冲和translog日志文件中。当写一条数据document的时候,一方面写入到mem buffer缓冲中,一方面同时写入到translog日志文件中。 2、buffer满了或者每隔1秒(可配),refresh将mem buffer中的…

MediatR 框架使用FluentValidation对Comand/Query进行自动拦截验证

简介 目录 简介 1. MediatR项目框架 2. 实现步骤 步骤 1&#xff1a;编写管道行为 1. query 查询的管道 2. command命令的管道 步骤 2&#xff1a;注册验证器和管道行为 步骤 3&#xff1a;定义命令类 步骤 4&#xff1a;定义处理程序 步骤 5&#xff1a;编写命令验证器…

34 | 到底可不可以使用join?

在实际生产中&#xff0c;关于 join 语句使用的问题&#xff0c;一般会集中在以下两类&#xff1a; 1. 我们 DBA 不让使用 join&#xff0c;使用 join 有什么问题呢&#xff1f; 2. 如果有两个大小不同的表做 join&#xff0c;应该用哪个表做驱动表呢&#xff1f; 今天这篇文…

机器学习流程—迁移学习 模型微调

文章目录 机器学习流程—迁移学习 模型微调迁移学习的思想主要优点常见的微调 fine-tuning案例一 VGG19鲜花分类器案例二 ResNet图像分类案例三 BERT 情感分析总结机器学习流程—迁移学习 模型微调 一旦你踏进了机器学习领域,就等同于踏进了“终身学习”之旅。因为机器学习领…

【算法刷题 | 二叉树 02】3.21 二叉树的层序遍历01(5题:二叉树的层序遍历、层序遍历||、右视图、层平均值,以及N叉树的层序遍历)

文章目录 5.二叉树的层序遍历5.1 102_二叉树的层序遍历5.1.1问题5.1.2解法&#xff1a;队列 5.2 107_二叉树的层序遍历||5.2.1问题5.2.2解法&#xff1a;队列 5.3 199_二叉树的右视图5.3.1问题5.3.2解决&#xff1a;队列 5.4 637_二叉树的层平均值5.4.1问题5.4.2解决&#xff1…

.NET Core 服务实现监控可观测性最佳实践

前言 本次实践主要是介绍 .Net Core 服务通过无侵入的方式接入观测云进行全面的可观测。 环境信息 系统环境&#xff1a;Kubernetes编程语言&#xff1a;.NET Core ≥ 2.1日志框架&#xff1a;Serilog探针类型&#xff1a;ddtrace 接入方案 准备工作 DataKit 部署 DataK…

探索神经网络:从前端开发者的视角看AI技术

在当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;技术正在以惊人的速度发展&#xff0c;并在各个领域展现出巨大的潜力和影响力。其中&#xff0c;神经网络作为AI领域的核心技术之一&#xff0c;引起了广泛的关注和研究。作为一名前端开发人员&#xff0c;了解…

css设置文字在图片上面显示(使用Position及引入背景图片(background-image: url(path)))

<div class"container"><img src"image.jpg" alt"背景图片"><div class"h-title">这里是文字</div><div class"config-title">这里是文字2</div> </div>方法一&#xff1a;使用绝…

Nodejs运行vue项目时,报错:Error: error:0308010C:digital envelope routines::unsupported

前端项目使用( npm run dev ) 运行vue项目时&#xff0c;出现错误&#xff1a;Error: error:0308010C:digital envelope routines::unsupported 经过探索&#xff0c;发现问题所在&#xff0c;主要是nodeJs V17版本发布了OpenSSL3.0对算法和秘钥大小增加了更为严格的限制&#…

4核16G服务器租用优惠价格,26.52元1个月,半年149元

阿里云4核16G服务器优惠价格26.52元1个月、79.56元3个月、149.00元半年&#xff0c;配置为阿里云服务器ECS经济型e实例ecs.e-c1m4.xlarge&#xff0c;4核16G、按固定带宽 10Mbs、100GB ESSD Entry系统盘&#xff0c;活动链接 aliyunfuwuqi.com/go/aliyun 活动链接打开如下图&a…

Go语言介绍

Go语言介绍 Go语言&#xff0c;又称Golang&#xff0c;是由Google公司开发的一种静态类型、编译型的开源编程语言。自2009年发布以来&#xff0c;Go语言凭借其简洁的语法、强大的并发处理能力和出色的跨平台性能&#xff0c;迅速在编程界崭露头角&#xff0c;成为众多开发者的…

ZHUTI主提2024夏季系列 —「逐·行」

ZHUTI主提全新发布2024夏季「逐行」系列&#xff0c;聚焦当下人与自然的关系&#xff0c;以衣为载体&#xff0c;秉承东方哲学的艺术理念&#xff0c;将美学艺术与主流时尚设计融合&#xff0c;赋予当代时装表达新方向&#xff0c;共创现代女性之美。 取自然之意境&#xff0c…