vue组件中使用防抖函数

在实际开发中，比如搜索栏，用户输入一个字符都要发送网络请求来返回搜索结果，这样对服务器的压力就太大了，我们需要使用防抖函数，来降低这个频率

1：在组件methods中定义防抖函数

methods: {
  debounce(fn, wait) {
    let timer = null;
    return function (...args) {
      if (timer) {
        clearTimeout(timer)
        timer = null
      }
      timer = setTimeout(function () {
        fn.apply(this, args)
      }, wait)
    }
  }
}
/* fn：需要频繁调用的方法 */
/* wait：间隔时间，表示多长时间没有操作则执行fn方法*/
/* 为什么要使用fn.apply()方法？需要改变function的this指向 */

2：在组件data中定义一个空的数据

data() {
  return {
    getData:null     
  }
}

3：在组件的创建或挂载生命周期函数中调用防抖函数，并将返回值赋值给data中的getData

1：在methods中添加一个方法，用于模拟需要频繁调用的方法（比如网络请求）

methods: {
  request(e) {
   if (e) {
      console.log('发送网络请求:' + e)
    }
  }
}
/* 判断一下e的值是否为空，如果为空则不发送请求 */

2：在created或mounted生命周期函数中调用防抖函数

created() {
  this.getData = this.debounce(this.request,500)
}
/* 调用防抖函数的同时传入一个方法，和间隔时间（传入的方法不带括号表示直接把函数本身传入，如果带有括号则表示直接执行函数） */
/* 防抖函数返回的是一个function，我们用data中的getData来接收它 */

4：在methods中创建一个方法，并调用data中的getData

methods: {
  getServerData(e) {
    this.getData(e.target.value)
  }
}

5：在input中模拟防抖

<template>
  <div>
    <input type="text" v-on:input="getServeData($event)">
  </div>
</template>

6：结果对比

1：没有防抖

 

2：开启防抖