【web前端Vue项目】----- 30秒教会你极简防抖输入框

Vue3 写项目 技术选型全家桶 移动端购物车+引用动画库+多选删除+筛选_活在风浪里的博客-优快云博客_vue全家桶前言：没有线上网址，所以我模拟了JSON,小伙伴可以根据自己需要，去调节，仅供参考写的很好简介：移动端购物车，时间原因我没配置rem， 大家除夕快乐可以考古之前的，有详细讲打包，各种配置配置rem有编辑、单选、全选、筛选…https://blog.youkuaiyun.com/m0_57904695/article/details/122760075?spm=1001.2014.3001.5502

30秒学会终极极简防抖

---

防抖概念：我们加入了防抖以后，当你在频繁的输入时，并不会发送请求，只有当你在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。

节流概念: 节流会稀释执行频率，每间隔多久执行一次

文档 ： 

---

图例：

---

• 输入需要查询的内容后，1000秒后自动触发api，自动渲染表格（时间可自定义）

• 

源码：

---

//data

// 后端必填参数

obj: {

// 查询参数、用于搜索

query:“”,

// 第一页

pagenum: 1,

// 页容量

pagesize: 5,

},

下载

cnpm i --save lodash

// JS

//在使用的页面导入

import _ from “lodash”;

// template

<el-input placeholder=“根据姓名查找…” v-model=“obj.query”

clearable @input=“searchUser”>

// JS

//点击搜索 输入搜索防抖

searchUser: _.debounce(function() {

this.list();

}, 1000),

此时代码已经写完了，只是this.list() 是接口数据的请求，把它也贴上作为参考

// 打开页面就渲染

list() {

// getUserListAjax是我封装后的api

getUserListAjax(this.obj).then((res) => {

// console.log(res);

// 将后台请求到的数据赋值tableData

this.tableData = res.data.users;

// console.log(this.tableData);

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。