vue项目中按钮防抖处理

这篇具有很好参考价值的文章主要介绍了vue项目中按钮防抖处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

防抖的概念和意义

1. 概念

连续点击按钮时,按钮的点击事件只会触发触发一次,结束连续点击后,再次点击按钮时才会触发按钮的点击事件

2. 意义

按钮防抖是针对按钮操作时,用户连续点击按钮时也会每次触发按钮的绑定的点击事件,这会造成多次无效的触发

实现过程

1. 通过定义指令方式

通过定义指令方式实现防抖限制,可为需要防抖的按钮添加防抖的指令即可实现按钮的防抖操作限制,使用方式简洁

2. 实现代码

// 点击防抖
const throttle = {
  bind: (el, binding) => {
    let throttleTime = binding.value // 防抖时间
    if (!throttleTime) { // 用户若不设置防抖时间,则默认1s
      throttleTime = 1000
    }
    let timer
    let disable = false
    el.addEventListener('click', event => {
      if (timer) {
        clearTimeout(timer)
      }
      if (!disable) { // 第一次执行(一点击触发当前事件)
        disable = true
      } else {
        event && event.stopImmediatePropagation()
      }
      timer = setTimeout(() => {
        timer = null
        disable = false
      }, throttleTime)
    }, true)
  }
}

3. 使用案例代码文章来源地址https://www.toymoban.com/news/detail-534928.html

// 1. 注册指令
Vue.directive('throttle', throttle);

// 2. 按钮添加防抖指令

// 2.1 普通按钮或dom节点也可添加指令实现防抖显示
// eg1:
<button v-throttle="2000">按钮防抖</button>


// 2.2 element组件按钮实现防抖
<el-button v-throttle="2000">按钮防抖</el-button>

到了这里,关于vue项目中按钮防抖处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目

    例如,您想知道当前时间是否处于 9:00 ~ 12:00 时间区间内,然后根据这个判断进而实现业务逻辑。 如下示例所示, 本文提供一个函数,您只需要传入 2 个时间区间,便可得出当前时间是否在该时间区间范围内: 您可以一键复制,直接粘贴到您的项目中。 您只需要传入开始时

    2024年02月16日
    浏览(63)
  • vue3项目引入本地js文件,实现一个音频播放按钮

    目前有一个需求就是在网页上放置一个音乐控制按钮,并且是在vue3项目里面。于是小白的我遇到了2个问题,第一个问题是如何实现没有进度条的播放按钮,这个网上有现成的代码,可以通过js代码切换不同的图片或者是别的样式,并不算难;第二个问题是如何在vue3项目中引

    2024年02月19日
    浏览(57)
  • 前端面试题-js-new关键字-this指向-js事件流-防抖节流

    1.创建一个简单的空对象 2.原型的绑定,确定对象O的原型链 3.绑定this对象为O,传入参数;执行Person构造函数,进行属性和方法的赋值操作 4.返回结果 普通函数的this指向 函数的this指向有一个基本的原则,谁调用的函数,函数的this就指向谁,否则指向全局 箭头函数的this指向

    2024年01月25日
    浏览(49)
  • 消灭前端闪烁魔鬼:Vue中的防抖术

    在前端的世界里,用户操作如同一场狂风骤雨,而我们的页面则要顶住这些波澜汹涌的输入。有时候,我们希望页面在用户输入停止后再作出响应,以避免频繁触发操作。这时,Vue的防抖动技术就如同时光隧道一样,将我们带回到宁静的过去。 本篇博客将带你穿越时空,揭开

    2024年02月02日
    浏览(41)
  • js监听input输入事件及使用防抖封装函数处理的实现

    循序渐进: 1.实现input框的输入监听事件: 2.防抖函数 防抖函数的目的:为了限制函数的执行频率而出现,优化解决函数触发频率过高导致延迟及假死卡顿等bug的出现。大多用在查询和提交功能上。 设置时间内多次点击或者输入只会执行最后一次点击或者输入; 代码: 3.i

    2024年02月12日
    浏览(42)
  • 【前端】vue.js从入门到项目实战笔记

    【前端目录贴】 文本插值中的代码被解释为节点的文本内容,而HTML插值中的代码则被渲染为视图节点。 3.1.1 文本插值 文本插值的方式:用 双大括号 将要绑定的变量、值、表达式括住就可以实现,Vue将会 获取计算后的值 ,并以 文本的形式 将其展示出来。 结果: 3.1.2 HTM

    2024年01月21日
    浏览(53)
  • vue3创建项目报错Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_ut

    报错信息: Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_util.parseArgs) is not a function     at init (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_modulescreate-vueoutfile.cjs:4481:72)     at Object.anonymous (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_module

    2024年04月10日
    浏览(163)
  • vue项目使用lodash节流防抖函数问题与解决

    在lodash函数工具库中,防抖 _.debounce 和节流 _.throttle 函数在一些频繁触发的事件中比较常用。 创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟  wait  毫秒后调用  func  方法。 参数 func   (Function) : 要防抖动的函数。 [wait=0]   (number) : 需要延迟的毫秒数。

    2024年02月08日
    浏览(42)
  • Vue.js 3 项目开发:迈向现代化前端开发的必经之路

    随着前端技术的不断发展,Vue.js作为一种轻量级的JavaScript框架,已经逐渐成为了前端开发者的首选。Vue.js 3有哪些新特性、优势以及如何高效地进行项目开发呢? Vue.js是一种用于构建用户界面的渐进式框架。它的核心库专注于视图层,易于与其他库或现有项目集成。Vue.js 3是

    2024年01月23日
    浏览(53)
  • 前端vue项目使用Decimal.js做加减乘除求余运算

    运算结果是Decimal对象,需要使用.toNumber()转为数字

    2024年04月13日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包