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

news/2024/7/10 1:45:05 标签: javascript, 前端, vue, vue.js, uniapp

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.niftyadmin.cn/n/5445906.html

相关文章

【解决报错】vi/vim修改文件时报错:Found a swap file by the name xxxxx

目录 报错内容报错原因解决方法 报错内容 vim打开文件提示&#xff1a; Found a swap file by the name xxxxx报错原因 使用vi或vim编辑器编写代码时由于网络不稳定&#xff08;或其他种种原因&#xff09;断开了连接&#xff0c;编辑好的代码没有运行和保存&#xff0c;再次…

superset 二开增加 flink 数据源连接通过flink sql 查询数据

前言 superset 目前还不支持 flink 的数据源连接&#xff0c;目前我们公司在探索使用数据湖那一套东西&#xff1a; 使用 flink 作为计算引擎使用 paimon oss对象存储对接 flink 作为底层存储使用 superset 通过 flink gateway 查询 paimon 数据形成报表 增加flink数据源 …

Vue 常见面试题(一)

目录 1、Vue 的最大的优势是什么&#xff1f;&#xff08;必会&#xff09; 2、Vue 和 jQuery 两者之间的区别是什么&#xff1f;&#xff08;必会&#xff09; 3、MVVM 和 MVC 区别是什么&#xff1f;哪些场景适合&#xff1f;&#xff08;必会&#xff09; 1、基本定义 2…

前端工程化(三)邂逅Webpack和打包过程

目录 Vue项目加载Webpack 安装Webpack的默认打包创建局部的 webpack Vue项目加载 JavaScript的打包&#xff1a;  将ES6转换成ES5的语法&#xff1b;  TypeScript的处理&#xff0c;将其转换成JavaScript&#xff1b; Css的处理&#xff1a;  CSS文件模块的加载、提取&a…

485问题汇总

485问题汇总 485 通信波形没有负电压 问题描述&#xff1a;设备在没有外设的时候通信波形是正常的&#xff0c;即5V可以出来&#xff0c;在连接上设备后&#xff0c;设备的通信波形的-5V会随着设备的增多&#xff0c;电压会慢慢上升。当设备连接到24台设备后&#xff0c;485总…

前端小白的学习之路(ES6 三)

提示&#xff1a;类&#xff1a;class, 模块化:modules(基本概念) 目录 一、类class 1.声明类 2.类的继承 3.类的静态成员 4.私有属性 二、模块化(基本) 1.定义组件与引入组件 2.书写方式 1) 按需导出导入 2) 全部导出导入 3) 设置模块的别名 一、类class 在 ECMAS…

使用npm创建一个全局的cli命令,就像vue-cli一样

我们用过vue-cli等工具包&#xff0c;全局安装之后&#xff0c;我们可以直接使用vue create等命令&#xff0c;实际上能够这样使用的原因&#xff0c;就是使用了package.json里面的bin字段注册命令。接下来就以一个脚本文件为例子为大家演示一下bin是如何发挥作用的。 创建项目…

【数据结构与算法】算法复杂度

一、什么是复杂度&#xff1f; 程序执行时需要的计算量和内存空间&#xff0c;其中计算量是指时间复杂度&#xff0c;计算量大则需要时间久&#xff1b;内存空间是指空间复杂度和代码是否简洁无关&#xff0c;而是指计算机的cpu和内存计算复杂程度。 复杂度是数量级&#xff0…