vue组件中使用防抖函数的方式
更新时间：2025年04月27日 09:05:33 作者：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.结果对比
- 没有防抖
- 开启防抖
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue + Webpack + Vue-loader学习教程之相关配置篇
这篇文章主要介绍了关于Vue + Webpack + Vue-loader的相关配置篇，文中通过示例代码介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
这篇文章主要介绍了使用Typescript封装一个Vue组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
vue+element-ui中form输入框无法输入问题的解决方法
很多初次接触element-ui的同学,在用到element form组件时可能会遇到input框无法输入文字的问题,下面这篇文章主要给大家介绍了关于vue+element-ui中form输入框无法输入问题的解决方法,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue结合echarts绘制一个支持切换的折线图实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue props传递的类型和写法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
Vue组件通信$attrs、$listeners实现原理解析
这篇文章主要介绍了Vue组件通信$attrs、$listeners实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了nuxt使用vuex存储及获取用户信息踩坑的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
使用Vant完成DatetimePicker 日期的选择器操作
这篇文章主要介绍了使用Vant完成DatetimePicker 日期的选择器操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Vue Router在Vue.js的核心库上提供了路由的功能,使得我们可以在单页应用中实现页面的切换、跳转和参数传递等功能,本文主要介绍了Vue3中嵌套路由和编程式路由的实现,感兴趣的可以了解一下2023-12-12
下面小编就为大家分享一篇基于vue2.0动态组件及render详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论