关于防抖节流操作

一、为什么要防抖节流

• 一个功能本身就是要限制被调用的次数。例如用户请求登陆的次数不能太频繁。
• 一个功能没有必须被频繁调用。例如，在输入框中输入信息之后，输入内容的每一次变化都需要去后端取回后台建议的数据。举个例子：用户在极短的时间内连续输入"javascript"，这10个字符，如果不做降频处理的话就会发出10次请求，每次请求的关键字依次是"j",“ja”,“jav”，…“javascript”。而其实对用户真正有用的可能只是搜索"javascript"的结果，那这样的话，前几次的请求大概率都是无用的。

二、防抖

某事件函数被高频调用 ，我们希望降低被调用频率，可以对函数进行n秒防抖处理
当函数被调用时候 不会立刻执行 而是在规定时间之后执行（类似LOL英雄回城）

// 对该函数进行防抖处理
    // 当函数被调用时候 不会立刻执行 而是在规定时间之后执行
    // 如果在规定时间内它再次被调用 则当前被调用的时间开始 再向后延迟
      
      hclick () {  
      if (this.timer) {    // 先判断有无定时器正在执行  有则清楚
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(async () => { // 定时器里面执行要操作的事件
        事件处理、请求接口操作
      }, 5000)
    },

三、节流

在输入框下面出现历史提示或者搜索建议时，建议使用节流操作
节流处理 降低频率 如果这个函数距离上一次被调用的时间之间间隔不到规定时间 则本次不执行代码

• 节流是节约用水：把一直连续放水的水龙头关小，直到让水是一点一点向下滴（函数还是可以被调用多次，只不过是频率变慢了）

    hclick () {
      if (!this.timer) {  // 判断 如果没有定时器 则执行
        this.timer = setTimeout(async () => {
          this.timer = null    // 当进入定时器后 先将定时间清空
          事件处理、请求接口操作
        }, 300)
      }
    },