Vue框架中输入框做防抖和节流操作

什么是防抖？防抖：就是你触发事件后多少秒后在进行执行，如果你触发事件的事件间隔小于延迟事件，那么就在你最后一次触发事件后的多少秒的时候才执行。应用场景：例如一个搜索框，用户输入数据会进行发送网络请求进行检索，为了减少服务器的压力，在@input事件上可做一个防抖操作。在用户触发@input事件的200ms后执行网络请求函数，如果一直输入就一直不发送，直到停止输入后的200ms才执行。代码：效果如图

坦淡

3159人浏览 · 2021-10-27 16:54:19

坦淡 · 2021-10-27 16:54:19 发布

什么是防抖？

防抖：就是你触发事件后多少秒后在进行执行，如果你触发事件的事件间隔小于延迟事件，那么就在你最后一次触发事件后的多少秒的时候才执行。

应用场景：例如一个搜索框，用户输入数据会进行发送网络请求进行检索，为了减少服务器的压力，在@input事件上可做一个防抖操作。
在用户触发@input事件的200ms后执行网络请求函数，如果一直输入就一直不发送，直到停止输入后的200ms才执行。

代码：
在这里插入图片描述
效果如图，不断的输入，等输入完了然后执行一次。

什么是节流？

节流：就是在一个时间间隔内不管你触发多少次事件，但是我就执行一次事件。
代码：
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^