vue中防抖和节流

实例：根据用户输入搜索框调取接口获取后台数据列表
需求：控制用户输入调取接口频率

<van-search
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      v-model.trim="keyword"
      @input="hGetSuggestion_with_fang_dou"
      >
      <div slot="action" @click="hSearch">搜索</div>
    </van-search>

调取的接口方法封装

async hGetSuggestion () {
      console.log(this.keyword) // 用户删除输入时不调用
      if (this.keyword === '') {
        this.suggestion = []
        return
      }
      // 1. 调用接口
      const result = await getSuggestion(this.keyword)
      // 2. 将获取的数据显示在建议区
      console.log(result)
      this.suggestion = result.data.data.options
    },

防抖处理

本质：
当用户输入内容变化时，就会执行 --- 防抖处理
     防抖（10秒）: 目标就是降频。一件事如果执行的频率非常快，抖动：没有意义的， 不要让你抖...
     思路：  1、 当这个函数被调用时，不是立即执行的时，而是延迟 10 秒再执行.
      2、 如果在10秒之内，再次调用这个函数，则从当前被调用的时间开始算，再延迟 10 秒(10秒内不能再次调用函数，  一旦打断，就要重新计时)。
    3、如果10秒内没有再次调用这个函数，则10秒达了之后，执行代码。
    // 生活中： 等电梯
    // 游戏中： 英雄回城

hGetSuggestion_with_fang_dou () {
      // 以防抖5s为例： (值越大，越不灵敏)
      // 用户第一次输入第一个字符，代码不会立即去执行（ajax不是立即发出去）
      // 再是等5s之后再发ajax.如果在这5s内，用户输入第二个字符，再向后再延迟5s.

      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        //调用要节流的方法
        this.hGetSuggestion()
      }, 5 * 1000)
 }

节流

当用户输入内容变化时，就会执行 --- 节流处理
    节流（10秒）: 目标就是降频。一件事如果执行的频率非常快，节流就是把频率降至指定的值
   思路：
     当这个函数被调用时，不是立即执行的时，而是检查本次执行距离上一次执行中间是否相隔10秒。
    如果相隔时间不足10s，则不执行；否则就执行
    实例：
    生活中： 你女朋友每小时都要你发定位；节流处理（5小时）：如果早上8点发了定位，则下一次发定位时时间是：下午1点。中间其它时间不发定位
	游戏中： 射击游戏，点一次鼠标发一颗子弹，你是否可能按下鼠标不放，就不间断发子弹？

    hGetSuggestion_with_jie_liu () {
      console.log('当前用户的输入', this.keyword, (new Date()).toLocaleTimeString())
      // 以节流3s为例： (值越大，越不灵敏)
      // 对于本次调用，检查本次执行距离上一次执行中间是否相隔5秒
      // 是：执行，否：不执行
      if (this.timer) {
        return
      }
      this.timer = setTimeout(() => {
        this.timer = null
        this.hGetSuggestion()
      }, 100) //  3 * 1000
    }
  }

原链接：vue中防抖和节流_Best_卡卡的博客-CSDN博客_vue防抖和节流

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79801.html