为什么红牛是保健事物,不是饮料呢?
今天写了一个搜索事件,然后有一个需求,就是搜索的事件直接在输入框中输入内容,直接请求接口去进行搜索,这样会造成一个问题,看下面的图片
会造成多次请求接口,这样就大大增加了服务器的鸭梨啊,比如说,淘宝,京东,每天巨大的浏览量,不好好处理那会经常出现服务器瘫痪 了,这时候,程序员小哥哥小姐姐会要加班了,为了早点下班,也要性能优化啊,所以提出防抖,节流来解决这个问题
首先,了解一下,防抖,节流是什么
防抖:在固定时间内,如果有事件触发,则会再延长固定时间,如果在固定时间之内,一直没有触发事件,就会再次执行函数。
如果没看懂,没关系,仔细看这个例子,电梯,不是陌生的吧,按下电梯,电梯门打开,从电梯门打开到电梯门关上的事件是10s,如果在这10s之内没有人关上电梯,那么10s后就会自动关上电梯,这个过程就是在固定时间之内,一直没有触发事件,就会再次执行函数,继续想象,在电梯闭合的一瞬间,看见一个小姐姐跑过来赶电梯,这时候极具绅士风度的你按下了开电梯的按钮,电梯收到指令会再次打开电梯门,这时候就会再次打开电梯10s,这就解释了在固定时间内,如果有事件触发,则会再延长固定时间,
节流:指定一个固定时间,无论时间触发与否,只要到了固定时间,都会触发
就比如说,我设置电脑熄屏时间是30min,只要到了30min就会自动熄屏,每30分钟熄屏一次
目的:降低高频时间触发,减少DOM操作或者请求次数,提高性能
比如说:onscroll,onresize,keydown,keyup,mousemove这些高频事件
那么如何解决我input一直输入一直请求后端的问题呢??
这就用到了防抖
首先声明一下,我的这个项目是一个后端管理系统,所以我直接用了一个第三方库,lodash
说的不少了,看代码吧👀👀👀
1.下载lodash
npm i --save lodash
2.引入
import _ from “lodash”;
3. _.throttle()
html部分
<el-input v-model="input" @input="searchList"
@change="search">
<template slot="append">
<i class="el-icon-search"></i>
</template>
</el-input>
js部分
//搜索代码
//_.throttle()防抖函数,第一个参数是函数,第二个函数是时间点
searchList: _.throttle(function () {
this.search();
}, 2000),
search(){
//搜索接口
searchList(this.input,this.pagenum, this.pagesize).
then((res) => {
console.log(res);
if (res.data.meta.status == 200) {
this.$message.success(res.data.meta.msg);
this.userList=res.data.data.users
}
});
},
以上就是我理解的,😂😂😂,希望大神多多补充