前端的防抖和节流的应用场景以及使用

防抖和节流

1.什么是防抖

防抖：顾明思议，一次只有单一的请求，我们举个例子，例如：喜欢打王者荣耀的朋友都知道，我打王者荣耀好家伙没血了，我要回城，这个时候我点击一次，就开始我的进度条回城，但是中途万一不小心重新点击，那回城就又开始重头算。要是中间突然有个人打你一下，你也回不了城。

js中有哪些页面使用场景是关于防抖的呢(第一个经常遇到)：

1.登陆，发短信（倒计时），防止用户点击过快，以至于发送多次请求，然后这里不是吐槽后端啊！本人亲测没错登陆接口单击20次，服务器挂了。。。当然这个是老项目。所以我们为了不让用户察觉，我们的后端小哥工作不到位，这里前端呢可以做一个防抖。
2.模糊搜索（这个也是用的很多的例如：某宝你要买袜子，你搜索袜子），这个时候呢。下来菜单就会出现长袜女袜，男袜，各种。大致和袜子相关的匹配。
3.调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖

模糊匹配

（由于每次输入值改变都会调用搜索函数，太占内存，所以在监听值改变函数中使用了防抖，使函数在触发过后的一定时间后再执行，提高了程序运行效率）
这里我主要介绍两个东西，第一个就是模糊匹配。
第一步：把全部数据渲染到页面上。
第二步：定义一个新的数组search存放查找到的数据
第三步：遍历所有数据，比对输入框中现有的值与需要比较字段，如果存在就放在searchValueData中。
第四步：每次输入框中的值改变（值改变监听函数中）调用搜索方法
渲染代码：

    <el-input
        clearable
        placeholder="输入关键字搜索"
        prefix-icon="el-icon-search"
        v-model="searchText"
        @input = "inputChange"
    >
    </el-input>

searchValue(str){
      this.search = []
      this.newtableData.forEach((el)=>{
        if(el.username.indexOf(str)!==-1 || el.class.indexOf(str)!==-1 || el.week.indexOf(str)!==-1  || el.uid.indexOf(str)!==-1){
          this.searchValueData.push(el) 
        }  
      })
}
//这里就是触发的时候，去监听，我这个值，是否正解。
inputChange(str){
      //定时器，防抖
      if(this.timer!==''){
        clearTimeout(this.timer)
        this.timer=''
      }
       this.timer = setTimeout(()=>{
         this.search(str)
         this.timer = ''
       },500)  
    }
    

今天又有活了，好了，接下去还有一些，我下次再写，今天要忙着写代码了。。