浅谈防抖，节流

为什么红牛是保健事物，不是饮料呢？

今天写了一个搜索事件,然后有一个需求,就是搜索的事件直接在输入框中输入内容，直接请求接口去进行搜索，这样会造成一个问题，看下面的图片

会造成多次请求接口，这样就大大增加了服务器的鸭梨啊，比如说，淘宝，京东，每天巨大的浏览量，不好好处理那会经常出现服务器瘫痪 了，这时候，程序员小哥哥小姐姐会要加班了，为了早点下班，也要性能优化啊，所以提出防抖，节流来解决这个问题

首先，了解一下，防抖，节流是什么

防抖：在固定时间内，如果有事件触发，则会再延长固定时间，如果在固定时间之内，一直没有触发事件，就会再次执行函数。

如果没看懂，没关系，仔细看这个例子，电梯，不是陌生的吧，按下电梯，电梯门打开，从电梯门打开到电梯门关上的事件是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
        } 
      });
    },

以上就是我理解的，😂😂😂，希望大神多多补充