Vue函数防抖之优化用户输入完成之后再发送请求

最新推荐文章于 2024-04-09 09:27:04 发布
最新推荐文章于 2024-04-09 09:27:04 发布
阅读量1.6k 收藏 14
点赞数 3
分类专栏： Vue知识点 JavaScript知识点 文章标签： vue 防抖 表单输入
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41008567/article/details/117991480
版权
本文探讨了如何将Vue中input输入立即发送请求优化为用户输入完成后才发送请求，采用防抖技术减少频繁的HTTP请求，避免资源浪费。通过设置倒计时和监听，确保在用户输入停止一段时间后才执行请求。防抖常用于搜索框联想推荐等功能，以提高性能。
摘要由CSDN通过智能技术生成

Vue函数input输入值即请求，优化为用户输入完成之后再请求

在这里插入图片描述

在这里插入图片描述

代码实现

  • 需要一个倒计时,一个监听,一个事件.
  • 每触发一个监听,就检查是否有倒计时,如果有,则清除,然后重新计时,如果没有,则创建一个倒计时,
  • 时间一到,自动执行事件.
watch: {
   
	//实现input连续输入，只发一次请求,
    //监听用户表单输入值的变化，设置定时器，当用户输入完，再触发事件
    'fmDa.actualLineLen':function(curVal,
最低0.47元/天 解锁文章
input事件 输入中文再进行搜索的问题
u013379933的博客
02-01 1566
触发compositionstart时，文本框会填入 “虚拟文本”（待确认文本），同时触发input事件；在触发compositionend时，就是填入实际内容后（已确认文本）。 var cpLock = true; $('.com_search_input').on('compositionstart', function () { cpLock = false
如何让Vue的输入框输入完成后发起网络请求
小鹿不在林间的博客
03-16 3246
input输入内容时延时请求 为了解决当用户输入内容时连续发起网络请求，使用户输入完毕后再发起请求。 函数防抖 <el-input v-model="selectName" placeholder="请输入姓名查找" size="mini" class="select-styl" ></el-input> 在用户输入内容的时候，将输入内容selectNa...
Input用户输入完后再执行方法
卡卡罗特的博客
09-16 6184
在开发过程中，input的用户输入的值，绑定的onchange事件，如果没敲一次键盘，执行一次方法，请求一次数据的话就很耗内存了；这里用一下lodash <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"><
vue+elementui input框输入值后请求接口，优化为用户输入完成之后再请求
weixin_43643250的博客
10-18 3598
根据项目需求，需要用户输入完之后再请求不会造成资源浪费，于是参考 https://blog.csdn.net/tangkthh/article/details/92679882 有以下方式，实现需求 以此记录一下 <el-input v-model="materialCode" clearable size="small" placehol
在Vue中使用JavaScript防抖
Web_chicken的博客
05-13 2956
Vue中使用JS防抖
Vue中函数防抖节流的理解及应用实现
11-21
Vue中的函数防抖和节流技术是优化性能的重要手段，主要应用于处理频繁触发的事件，如用户输入、滚动、窗口大小调整等。这两种技术的主要目的是限制函数的执行频率，以节省系统资源，防止过度计算。 一、函数防抖 ...
vue中axios防止多次触发终止多次请求的示例代码（防抖）
10-15
在前端开发中，经常会遇到需要在用户输入时发送请求的情况，比如在搜索框中输入文本时，我们希望能够在用户停止输入一段时间后，才进行数据的搜索和渲染。这样做的好处是减少了HTTP请求的次数，提升用户体验，并减轻...
Vue最新防抖方案(必看篇)
10-16
例如，在搜索框输入时，我们可以设置防抖，避免用户每打一个字就发送一个请求，而是等待用户停止输入一段时间后再发送一次请求。 在Vue中实现防抖，可以使用如下的代码示例： ```javascript const delay = ...
【VUE】elementUI：el-input，判断用户输入完后查询
最新发布
柠檬加冰
04-09 587
逻辑：判断是否有输入，如果有输入，则清空并重启定时器，从头开始1.5s计时。
vue前端中的函数防抖与节流
Drizzlejj的博客
06-10 1109
防抖：用户操作很频繁，但是只是执行一次应用场景： 用于无法预知的用户主动行为 1. 用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源； 2.手机号、邮箱验证输入检测(change、input、blur、keyup等事件触发，每次键入都会触发) 3.窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。 4.鼠标的mousemove、mouseove
vue自定义指令监听input输入,当输入完成才能调取接口，防止频繁调用接口
Meta.Qing的博客
02-20 4261
Vue 自定义指令来实现监听 input 输入，但是你需要配合一些 JavaScript 代码才能实现输入完成后才调用接口的逻辑。在上面的示例中，我们定义了一个自定义指令叫做。该指令监听了input事件，并使用setTimeout实现了防抖的逻辑，从而在用户输入完成之后才会调用getData方法。同时，我们还在指令的参数中使用了500ms，表示用户输入完成后需要等待 500 毫秒才会调用getData方法，从而避免了频繁调用接口的问题。需要注意的是，上面的代码中使用了一个。
监听input输入框输入内容一秒后请求
qq_34631220的博客
08-10 1316
<input type="text" id="names" name="title" lay-verify="title" autocomplete="off" placeholder="输入搜索业主房产" class="layui-input"> var timeout; $("#names").on("input propertychange",function(event){ var name = $(this).val(.
vue 应用-防抖-节流
偏执的小男孩儿
12-06 689
Vue 防止用户多次点击触发多次调用接口
Vue事件
z1216108894的博客
12-05 338
v-on：绑定事件监听,可简写为@ //v-on 传递自定义参数,事件修饰符 <div id="app"> <input type="button" @click="dolt(p1,p2，$event)"/> <input type="text" @keyup.enter="sayHi"> //只有按下回车才触发 </div> var app = new Vue({ el: "#app", methods: {
vue中常用的事件函数
m0_69876298的博客
04-17 487
vue2中各种常用事件函数
vue事件处理
weixin_44575660的博客
07-26 290
绑定监听 vue可以通过@click绑定方法，默认参数是event，在方法中如果指明了形参event可以获取控件的属性值，如果没有指明形参event也使用event也不会报错，但是会有奇奇怪怪颜色的东西，如果有形参必须传event,此时通过$event指明实参event <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件处理</title&g
vue实现监听监听input值的变化，停止输入n秒后再去发送请求
leilei__66的博客
03-01 3604
vue实现监听监听input值的变化，停止输入n秒后再去发送请求 定义一个全局变量存放计时器 定义input输入框事件改变事件 写定时器操作代码
vue函数input输入值即请求，优化为用户输入完成之后再请求
小糖穿越火线
06-17 8450
vue函数input输入值请求时延迟0.5秒请求 目的：解决当用户连续输入连续请求接口的问题，达到当用户输入完成之后再请求。 函数防抖 <el-input v-model="selectName" placeholder="请输入姓名查找" size="mini" class="select-styl" ></el-input> data ()...
vue中实时监听input值的变化，停止输入n秒后去请求，而不是时时请求数据
热门推荐
yumihe
08-17 2万+
在做搜索功能的时候，我们不希望input框中值一改变，就马上去请求数据，而是在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。这就是函数防抖。 因为我们可能在input框中的值还没有输完，这个时候，增加一个字符，就发送一次请求，这样太消耗程序，可能出现卡顿的情况。 因此，实时监听input值的变化，输入一个字符，200ms后再去获取input中的输入值。...
Vue中优化：防抖与节流解决性能问题
首先，让我们了解什么是函数防抖（debounce）。防抖的作用是在一段时间内，如果事件被连续触发，只有当这段时间过去后，没有再次触发事件，才会执行对应的函数。例如，在滚动事件中，如果用户快速滑动，`scroll`事件...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值