Vue项目里防抖的使用

置顶 已于 2023-08-17 10:26:13 修改
阅读量886 收藏
点赞数
分类专栏： vue2实战记录 文章标签： vue.js javascript
于 2023-05-27 09:42:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37635012/article/details/130897464
版权
在Vue项目中，为防止快速点击导致表单重复提交，可以利用防抖技术。创建src/directives目录，建立index.js和debounce.js。index.js用于引入和注册自定义指令，debounce.js实现防抖功能。在main.js中引入自定义指令，并在组件上通过v-debounce指令调用方法。若需传递参数，可通过中转方法如submitClick调用submit。
摘要由CSDN通过智能技术生成

有时候我们表单保存时，如果快速点击保存按钮，会出现多次提交保存同一表单到数据库的问题，这样会导致同一表单短时间重复提交多次，于是我们可以用到防抖。

在Vue项目里，找到src下的directives目录，如果发现src下没有这个目录，那我们就自己建一个directives目录。然后directives目录下新建一个index.js和debounce.js,这个index.js里就是引入和注册我们的自定义指令，如下所示：
在这里插入图片描述

//index.js
import debounce from './debounce' //防抖

// 自定义指令
const directives
了解本专栏 订阅专栏 解锁全文 超级会员免费看
百思不得小李
关注
专栏目录
订阅专栏
Vue中使用防抖与截流
01-17
在Vue项目中，我们可以自定义一个防抖函数，如下所示（参考`debounce.js`中的实现）： ```javascript function debounce(func, wait) { let timeout; return function() { const context = this; const args = ...
vue中防抖的使用
qq_44917015的博客
12-11 951
防抖函数 function debounce(fn, immediate = true) { let timer; return function () { if (timer) clearTimeout(timer); if (immediate) { let bool = !timer; timer = setTimeout(() => (timer = 0), 300); return bool && fn.apply(
vue中使用防抖和节流
01-24
vue项目中防抖和节流的指令 在mian.js中use就可以全局使用了
在vue中实现函数防抖
最新发布
youhebuke225的博客
08-07 526
首先，你可以在你的Vue组件的<script>部分或者在一个单独的JavaScript文件中定义一个防抖函数。这个函数将接受一个需要防抖的函数和一个等待时间（毫秒）作为参数。// 防抖函数}, wait);
消灭前端闪烁魔鬼：Vue中的防抖术
前端全栈大佬
11-18 6250
本文将深入研究Vue中的防抖动技术。我们将首先介绍什么是防抖动，以及它在前端开发中的重要性。然后，我们将详细讨论Vue中如何实现防抖动，以及在实际项目中如何应用这一技术来优化用户体验。
vue实现防抖、节流
qq156831414的博客
09-30 1513
防抖：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。节流通常用在比防抖刷新更频繁的场景下，而且大部分是需要涉及动画的操作。场景：input输入时进行查询。节流：指连续触发事件但是在 n 秒中只执行一次函数。场景：按钮点击、下拉加载、鼠标滚动、拖拽动画
vue中防抖使用
总结前端开发中遇到的问题，分享前端知识
02-15 4220
防抖是在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。 <template> <div> <input v-model="value" @keyup="handleChange" /> </div> </template> <script> export default { name: "", data() { v
Vue防抖节流
qq_25757181的博客
07-22 4795
vue防抖-可以搜索输入框，输入多个字符进行搜索，当输入停止之后进行搜索操作者。--可以用于用户点击按钮事件防抖操作。1.多次操作只执行第一次操作。2.多次操作只执行最后一次操作。
Vue 中使用lodash对事件进行防抖和节流操作
10-15
在 Vue.js 应用中，使用 lodash 进行防抖和节流操作可以显著提升性能，避免因为频繁触发事件而导致的计算量过大，尤其是对于资源密集型的操作，如实时搜索、实时计算或者频繁的 DOM 操作。正确地应用防抖和节流技术...
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
10-16
在Vue项目中，我们经常会遇到需要防抖和节流的场景，例如，对于搜索框输入事件，我们不希望在每次用户输入时都调用一次查询接口，这样会极大浪费服务器资源和影响用户体验。同样，在上拉加载数据时，若用户快速连续...
vue中使用防抖
老男孩的博客
04-06 292
/** * @desc 函数防抖 * @param fnName 函数 * @param time 延迟执行毫秒数 */ export default function VueDebounce(fnName, time) { let timeout = null; return function () { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => {
vue 防抖
L_shouzi的博客
09-27 319
停止输入0.5秒后执行this.search() 这个方法 解决实时输入请求的问题；网上太多抄袭的debounce 自己也不尝试 就开始复制 ???? if(this.timer)clearTimeout(this.timer) this.timer=setTimeout(()=>{ this.search(val) },500) ...
vue实现防抖
weixin_42536961的博客
03-13 1715
开发中经常会遇到频繁调接口，导致性能降低的情况，类似输入框的值改变就会调一次接口，那么就应该加一个防抖函数，避免频繁调取接口，话不多说，上代码。在输入框输入值，等待1000毫秒后，会执行打印事件。然后在vue页面中直接引入就好了，下面是事例。2.在methods的函数中添加一下防抖。1.首先导入刚才写好的防抖函数。
vue中使用防抖函数
qq_24331363的博客
03-04 9729
&lt;input v-model="searchText" @input='search' placeholder="搜索电影" class="search-placeholder"&gt; 在公共的js文件utils.js中添加防抖函数如下： export default { debounce(fn, delay = 300) { //默认300毫秒 var...
vue表单提交 防抖
weixin_48286936的博客
01-26 1352
表单提交时防止多次点击操作 场景： 之前项目存在的一个bug，提交表单时，双击提交按钮，会调两次接口，第一次失败，第二次成功。 防抖： 策略是当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。 这是debounce的基本思想，在后期又扩展了前缘debounce，即执行动作在前，然后设定周期，周期内有事件被触发，不执行动作，且周期重新设定。 使用方法： src/utils/index.js中增加防抖方法 /** * 防抖 */ export const
vue项目的防抖函数封装
04-25
好的，关于Vue项目中的防抖函数封装，可以使用以下代码进行封装： ``` export default { debounce(fn, delay = 300) { let timeout = null; return function() { const args = arguments; if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { fn.apply(this, args); }, delay); }; } } ``` 可以将其放在一个公共的js文件中，并在需要的地方进行引入和调用。使用该封装函数可以有效地解决在某些场景下频繁触发事件导致页面卡顿或性能问题的情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值