首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue组件使用防抖函数

vue组件中使用防抖函数的方式

2025-04-27 09:05:34 作者：Tt涛㏒

这篇文章主要介绍了vue组件中使用防抖函数的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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

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

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

在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.结果对比

没有防抖

开启防抖

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。