【按钮防抖】el-button和普通按钮防抖，点击一次禁用一秒再恢复

最新推荐文章于 2025-08-05 17:25:47 发布
原创 最新推荐文章于 2025-08-05 17:25:47 发布 · 551 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript #按钮防抖 #按钮点击禁用

点击后的效果，一秒后会恢复可点击
左边是组件按钮，通过disabled控制
右边普通按钮通过自定义指令控制，这里自定义指令写法是html版本的
在这里插入图片描述

<body>
    <div id="app">
        <el-card>
            <p style="padding: 10px;">按钮控制防抖功能，两种按钮控制方式，一个通过disabled控制，一个通过vue自定义指令方式控制</p>
            <el-button type="primary" size='mini' @click="ceshi" :disabled="isButtonDisabled">主要按钮disabled控制</el-button>
最低0.47元/天 解锁文章
小程序按钮防抖和节流
qq_44897151的博客
05-18 1110
js实现防抖和节流网上写法大都雷同，踩坑之处都不带重样的，这里为了后来人方便记录一下， 在面试题中，一般将防抖 说到 闭包写法 函数嵌套函数 加个定时器就可以 实现起来也是这么回事， 防抖使用场景：按钮点击、输入框搜索、滚动事件 节流场景：DOM元素拖拽、运动事件 // util.js里封装方法 // 防抖函数 function debounce(fn, wait) { var timer = null; return function () { var context = this
Vue使用自定义指令实现按钮防抖功能，防止多次调接口
weixin_43551242的博客
04-14 1万+
首先什么是防抖？ 防抖就是指☞触发事件后在n秒内函数只执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。说到防抖大家应该会想到节流，两者cp哈哈哈。 什么是节流？ 节流是指连续触发事件但是在n秒钟只执行一次。 ` function throttle(fn, delay){ let timer; return function(){ if (timer) { return; } let me = this; let _arg = arguments; timer = setTime..
Element Plus 实例详解（二）___Button 按钮
热门推荐
逆境清醒的博客
03-25 1万+
Element Plus Basic 基础组件里Button 按钮，是常用的操作按钮，提供了Button 按钮的基础用法、Button 按钮禁用状态、链接按钮、文字按钮、图标按钮、按钮组等功能，本篇里我们一起来试用一下Element Plus的 Button 按钮组件。可以自定义按钮颜色。系统将自动计算 hover 和 active 颜色。实现效果：
js高阶函数 函数的节流丶防抖 以及封装方法
m0_62816172的博客
12-04 395
函数节流节流及防抖的介绍： 函数节流：当一个函数在大于等于某个周期时间才执行，如果在周期内是不执行的。 函数防抖：短时间内多次触发一个事件，只执行最后一次，或者执行最开始的一次，当在等待时间内再次触发事件时重新开始计时。 节流的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" .
el-button的全局防抖
12-11 479
防抖是一种常用的前端性能优化技术，主要用于控制高频触发的事件只执行最后一次操作。
Vue3 项目El-button 防抖
05-23
### Vue3 中 El-button 组件防抖功能的实现 在 Vue3 项目中为 `El-button` 实现防抖功能有多种方法，以下是几种常见的解决方案： #### 方法一：通过全局指令实现防抖 可以在项目的入口文件（如 `main.js` 或 `main...
<!-- 提交 --> <el-button v-if="!isStartFlow && !isFlowEnd && !isReview && !isLastNode" type="primary" :disabled="approveLoading" @click="getSubmitNode" > 提交 </el-button> <!-- 结案提交按钮 --> <el-button v-if="!isStartFlow && !isFlowEnd && !isReview && isLastNode" type="primary" :disabled="approveLoading" @click="getSubmitNode" > 结案 </el-button>这是我的两个按钮，我想做个防抖限制，五秒内不能点击第二次
最新发布
11-14
防抖通常用于防止短时间内多次触发同一个操作，比如防止用户多次点击提交按钮导致重复提交。 用户使用的是Vue.js框架，按钮上绑定了@click事件到getSubmitNode方法。现在需要在这个方法上添加防抖逻辑。防抖的基本...
el-button防止二次点击
05-21
### Element UI 中防止 `el-button` 被多次点击的解决方案 在开发过程中，为了提升用户体验并减少不必要的服务器负载，通常需要对按钮进行防抖处理。以下是几种常见的实现方式： #### 方法一：自定义指令 可以通过...
el-button 点击后触发定时器，半小时内不能重复点击该按钮,显示倒计时
07-02
我们正在使用Vue.js（特别是ElementUI的el-button）来实现一个功能：点击按钮后，按钮在半小时内不可点击，并显示倒计时（从30分钟开始倒计时）。思路：1.我们需要一个状态（比如`disabled`）来控制按钮是否禁用。2....
使用 Element-UI 中的 el-button 添加防抖指令防止重复提交
weixin_44590591的博客
01-20 1563
在现代Web开发中，防止用户在短时间内多次点击提交按钮是一个常见的需求。本文将介绍如何在Vue.js项目中使用自定义指令来实现按钮的防抖功能，防止用户在短时间内多次点击提交按钮。在使用Element-UI的el-button组件时，如果用户在短时间内多次点击提交按钮，可能会导致表单数据被多次提交。为了避免这种情况，我们需要在按钮上添加防抖功能，即在用户点击按钮后的一段时间内禁用按钮，防止重复点击。接下来，在需要添加防抖功能的按钮上使用v-no-more-click指令。
按钮防抖与节流-vue2
前后端分离，人不分离！
02-10 3873
防抖与节流，应用场景有很多，例如：禁止重复提交数据的场景、搜索框输入搜索条件，待输入停止后再开始搜索。
按钮防抖设计
魏波
08-05 779
按钮防抖（Debounce）是一种前端优化技术，主要用于防止用户快速重复点击按钮导致多次触发操作。核心原理是：点击后延迟执行目标函数，若在延迟时间内再次点击则重置计时。实现方式包括原生JavaScript（基础版和立即执行版）、Vue自定义指令和React Hook。优化建议包括：点击后禁用按钮、显示加载状态以减少误操作。注意设置合理的延迟时间（300-500ms），避免内存泄漏，并区分防抖与节流的不同应用场景。该技术适用于表单提交等需要防止重复触发的交互场景。
vue 按钮防抖
weixin_50572740的博客
04-23 589
【代码】vue 按钮防抖。
驱动之按键防抖
qq_34429554的博客
06-21 934
4.例如，mod_timer(&buttons_timer, jiffies+HZ/100)就表示把定时器中断时间每次延迟10ms，直到定时器中断在最后一次按键中断，设置的时间产生中断时，才会去读取按键值，这就相当于把读取按键值延迟到最后一次按键中断里，这样就避免了按键抖动带来的读取值不准确的问题。2.为了保证读取的值是准确的，则应该在最后一次中断里读取按键值，定时器的解决思想是，因为定时器也会在指定的时间产生中断，并且它的中断时间是可以修改的，所以把读取按键值的逻辑放在定时器的处理函数里。
按钮防抖（防止重复点击）
strugglebydreamlin的博客
09-23 1万+
写在前面 在日常开发中我们时长会遇到这样的问题，当用户点击某个按钮时触发一个http请求，从后端查询一些数据，或者做一些操作，而当用户无意或有意快速重复的点击按钮时，导致的后果就是重复的http请求或者完全没有重复必要的一些操作，毕竟站在程序的角度来考虑问题，这些操作是消耗cpu时间，消耗内存又完全没有必要的，甚至会造成程序的卡顿，所以我们就需要一种策略去防止这种情况的发生了
点击按钮时触发防抖
m0_64590669的博客
09-04 727
React，js中点击按钮时触发防抖
js 点击按钮的防抖
weixin_35755823的博客
01-09 1375
防抖 (debouncing) 是一种技术，旨在减少函数在短时间内被频繁调用的情况。 在 JavaScript 中，可以通过使用 setTimeout 函数来实现防抖。 例如，假设你有一个在点击按钮时调用的函数： function handleClick() { console.log('Button clicked'); } document.querySelector('button')...
给el-button加上防抖
努力努力再努力的博客
01-13 4326
vue项目中给el-button加上防抖 在项目开发中，相必大家时常会遇到按钮重复点击后引起事件重复提交的问题，在业余时间，我总结了几种方法，在此简述一下 利用按钮的 loading 属性，防止用户重复点击 直接把loading放在http请求去做，统一封装方法 给按钮加上防抖，点击一次需要间隔一段时间才能触发二次点击 我们写一下第三种解决方法，在这里我们使用vue全局指令来实现，选取了一种简单的指令方式 大概思路 ： 当第一次点击按钮时，设置它的 disabled 属性，超过防抖时间后释放属性 在项目
Element-UI中给el-button加上防抖
lwg112233的博客
12-28 4460
为啥我要加上防抖 在项目中常常会遇到这种问题 当我点击确定或者保存按钮时，如果请求时间过长或加上快速双击就会出现多次请求，造成意想不到的结果 解决方法： 给按钮加上一个全局指令 noMoreClick 来限制在n的时间内为 disabled //在main.js中 // 提交以后禁用按钮一段时间，防止重复提交 import Vue from 'vue' Vue.directive('noMoreClick', { inserted(el, binding) { el.a..
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

接口写好了吗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值