vue input输入框防抖debounce函数的使用
方法一:这种方式很简单,但是能实现一样的功能。<template><div><input class="inputBox" type="text" placeholder="搜索项目名称" v-model="searchValue" @keyup.enter="searchBtn" @input="searchBtn"></div></temp
·
方法一:
这种方式很简单,但是能实现一样的功能。
<template>
<div>
<input class="inputBox" type="text" placeholder="搜索项目名称" v-model="searchValue" @keyup.enter="searchBtn" @input="searchBtn">
</div>
</template>
<script>
let timers = null;
export default{
data(){
return{
searchValue:''
}
}
methods:{
searchBtn(){
clearTimeout(timers)
timers = setTimeout(() => {
this.getOfferList()//需要防抖的函数
}, 500);
},
}
}
</script>
方法二:
这个方法是vue官网上的做法。
计算属性和侦听器 — Vue.js
<template>
<div>
<input class="inputBox" type="text" placeholder="搜索项目名称" v-model="searchValue">
</div>
<template>
<script>
export default{
data(){
return{
searchValue:''
}
}
//监听input输入值变化
watch:{
searchValue:function(){
this.debouncedGetAnswer();
}
},
created(){
this.debouncedGetAnswer = this.debounce(this.getOfferList, 500);
//this.getOfferList是你查询数据的函数,也就是需要防抖的函数
},
methods:{
//防抖
debounce(fn, delay = 500){
let timer = null;
return function() {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
}
</script>
方法三:
1.封装一个模块,引入即可,在utils新建一个js文件,名称随便
// 节流
export function _throttle(fn, wait = 500) {
let last, now
return function() {
now = Date.now()
if (last && now - last < wait) {
last = now
} else {
last = now
fn.call(this, ...arguments)
}
}
}
// 防抖
export function _debounce(fn, wait = 500) {
let timer
return function() {
let context = this
let args = arguments
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(context, args)
}, wait)
}
}
2.在需要的vue文件引入即可使用
import { _throttle, _debounce } from '@/utils/throttle'
3.在vue文件的使用方法
// 监听搜索框内容的变化,等输入完成才会执行搜索函数=>即防抖
watch: {
searchValue: _debounce(function() {
this.page = 1
this.getJobFairList()
})
},
// 搜索,短时间内连续点击搜索按钮只执行一次搜索函数=>即节流
searchBtn: _throttle(function() {
if (this.searchValue) {
this.getJobFairList()
}
}),
方法三是最近才更新的代码,也是最新的代码,建议使用方法三
更多推荐
已为社区贡献3条内容
所有评论(0)