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:开启防抖
更多推荐
已为社区贡献1条内容
所有评论(0)