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

最新推荐文章于 2023-04-17 01:11:47 发布
VIP文章 最新推荐文章于 2023-04-17 01:11:47 发布
阅读量1.5k 收藏 14
点赞数 3
分类专栏： Vue知识点 JavaScript知识点 文章标签： vue 防抖 表单输入
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41008567/article/details/117991480
版权

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

在这里插入图片描述

在这里插入图片描述

代码实现

  • 需要一个倒计时,一个监听,一个事件.
  • 每触发一个监听,就检查是否有倒计时,如果有,则清除,然后重新计时,如果没有,则创建一个倒计时,
  • 时间一到,自动执行事件.
watch: {
   
	//实现input连续输入，只发一次请求,
    //监听用户表单输入值的变化，设置定时器，当用户输入完，再触发事件
    'fmDa.actualLineLen':function(curVal, oldVal)
最低0.47元/天 解锁文章
小小勤~
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
Vue中函数防抖节流的理解及应用实现
11-21
防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。 一、函数防抖 定义 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。 实现原理 函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。 使用场景 文本框输入搜索（连续输入时避免多次请求接口） 代码实现 /** * 函数防抖 */ export function debounce(fn, delay) { // 记
input输入框 输入内容后间隔一定时间发送请求（防抖）
最新发布
Lucawoods的博客
10-24 220
问题点：若是仅仅利用@input进行输入的检测，那么在输入一段话的过程中，会发送无数个请求，非常浪费。突破点：若没到设定的0.5秒，又再次输入了呢？因此我们需要在设定定时器前，先清空上一次的定时器。我们经常会遇到需要在输入内容后，直接根据输入的关键词获取想要的内容。解决：每次输入出发input后，应该依靠定时器（如0.5秒后）去延后发送请求。
【vue】input输入完值后请求后端接口
m0_46459413的博客
11-10 3531
Vue提供了一个watch方法去监听某些data内的数据变动，从而触发相应的操作，当需要在数据变化时执行异步或开销较大的操作时，watch方法是最有用的。将普通输入框改为输入数据后调用后端接口查询数据，在展示到页面上。
vue自定义指令监听input输入,当输入完成才能调取接口，防止频繁调用接口
Meta.Qing的博客
02-20 3747
Vue 自定义指令来实现监听 input 输入，但是你需要配合一些 JavaScript 代码才能实现输入完成后才调用接口的逻辑。在上面的示例中，我们定义了一个自定义指令叫做。该指令监听了input事件，并使用setTimeout实现了防抖的逻辑，从而在用户输入完成之后才会调用getData方法。同时，我们还在指令的参数中使用了500ms，表示用户输入完成后需要等待 500 毫秒才会调用getData方法，从而避免了频繁调用接口的问题。需要注意的是，上面的代码中使用了一个。
vue事件处理
weixin_44575660的博客
07-26 246
绑定监听 vue可以通过@click绑定方法，默认参数是event，在方法中如果指明了形参event可以获取控件的属性值，如果没有指明形参event也使用event也不会报错，但是会有奇奇怪怪颜色的东西，如果有形参必须传event,此时通过$event指明实参event <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件处理</title&g
vue+elementui input框输入值后请求接口，优化为用户输入完成之后再请求
weixin_43643250的博客
10-18 3189
根据项目需求，需要用户输入完之后再请求不会造成资源浪费，于是参考 https://blog.csdn.net/tangkthh/article/details/92679882 有以下方式，实现需求 以此记录一下 <el-input v-model="materialCode" clearable size="small" placehol
如何让Vue的输入框输入完成后发起网络请求
小鹿不在林间的博客
03-16 3041
input输入内容时延时请求 为了解决当用户输入内容时连续发起网络请求，使用户输入完毕后再发起请求。 函数防抖 <el-input v-model="selectName" placeholder="请输入姓名查找" size="mini" class="select-styl" ></el-input> 在用户输入内容的时候，将输入内容selectNa...
vue实现监听监听input值的变化，停止输入n秒后再去发送请求
leilei__66的博客
03-01 3334
vue实现监听监听input值的变化，停止输入n秒后再去发送请求 定义一个全局变量存放计时器 定义input输入框事件改变事件 写定时器操作代码
Vue使用轮询定时发送请求代码
10-14
主要介绍了Vue使用轮询定时发送请求代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
10-14
主要介绍了Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue输入节流,避免实时请求接口的实例代码
12-13
在做搜索的时候，当搜索页面只有一个输入框、没有确定按钮的时候，只能在用户输入时请求服务端，查询数据。这样会导致频繁的发送请求，造成服务端压力。 解决这个问题，可以使用vue做输入节流。 1、创建一个工具类...
vue发送websocket请求和http post请求的实例代码
10-16
主要介绍了vue发送websocket请求和http post请求的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
监听input输入框输入内容一秒后请求
qq_34631220的博客
08-10 997
<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三种常用获取input值方法
我的博客
06-05 3985
v-model 表单输入绑定 使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据 <template> <div> <input class="login-input" type="text" v-model="username" placeholder="请输入账号"> <input class="login-input" type="password" v-model="password" p.
vue中实时监听input值的变化，停止输入n秒后去请求，而不是时时请求数据
热门推荐
yumihe
08-17 2万+
在做搜索功能的时候，我们不希望input框中值一改变，就马上去请求数据，而是在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。这就是函数防抖。 因为我们可能在input框中的值还没有输完，这个时候，增加一个字符，就发送一次请求，这样太消耗程序，可能出现卡顿的情况。 因此，实时监听input值的变化，输入一个字符，200ms后再去获取input中的输入值。...
vue函数input输入值即请求，优化为用户输入完成之后再请求
小糖穿越火线
06-17 7887
vue函数input输入值请求时延迟0.5秒请求 目的：解决当用户连续输入连续请求接口的问题，达到当用户输入完成之后再请求。 函数防抖 <el-input v-model="selectName" placeholder="请输入姓名查找" size="mini" class="select-styl" ></el-input> data ()...
vue前端中的函数防抖与节流
Drizzlejj的博客
06-10 1046
防抖：用户操作很频繁，但是只是执行一次应用场景： 用于无法预知的用户主动行为 1. 用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源； 2.手机号、邮箱验证输入检测(change、input、blur、keyup等事件触发，每次键入都会触发) 3.窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。 4.鼠标的mousemove、mouseove
vue中常用的事件函数
m0_69876298的博客
04-17 400
vue2中各种常用事件函数
vue里面发送axios一定要在生命周期函数里面发送请求嘛
05-16
不一定必须在生命周期函数中发送 Axios 请求，但是在生命周期函数中发送请求的好处是可以确保组件已经被正确地挂载和渲染，避免了在组件没有完成渲染之前进行数据操作，导致出现意外错误的情况。 通常情况下，我们会在 `created` 或 `mounted` 生命周期函数中发送请求。其中，`created` 生命周期在组件实例被创建之后立即调用，此时组件的数据和 DOM 都还没有准备好，而 `mounted` 生命周期则是在组件挂载到 DOM 后调用，此时组件的 DOM 已经准备好，可以进行数据操作。 如果你需要在组件的其他生命周期函数或方法中发送请求，也是可以的，只要保证在组件渲染完成之后进行即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值