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.结果对比
- 没有防抖
- 开启防抖
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
文章总结了Vue3中props和ref的使用方法、特点及区别,包括基本用法、类型校验、默认值设置、事件通信等,并指出了常见误区和最佳实践2026-01-01
这篇文章主要介绍了VueRouter路由模式的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了如何使用Vue封装一个可随时暂停启动无需担心副作用的定时器,感兴趣的小伙伴可以跟随小编一起学习一下2024-11-11
这篇文章主要介绍了vue中的@click.native 原生点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue+iview/elementUi实现城市多选，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了vue3的沙箱机制的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
vue项目报错Extra semicolon (semi)问题及解决
这篇文章主要介绍了vue项目报错Extra semicolon (semi)问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
下面小编就为大家分享一篇vue.js中$set与数组更新方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了Vue.js实现图片切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
element-ui tooltip修改背景颜色和箭头颜色的实现
这篇文章主要介绍了element-ui tooltip修改背景颜色和箭头颜色的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
最新评论