home.vue
<template>
<div>
<Input v-model.trim="input" placeholder="输入车牌号" @keyup.native="searchCarCode" clearable />
</div>
</template>
<script>
import util from '@/lib/utils'
export default {
data(){
return{
input:'',
}
},
methods:{
searchCarCode:util._Throttle(function(){
console.log(this.form1.car)
this.search();
},1000),
search(){
if (!this.input) {
this.$Message.error('请输入车牌号');
return false
}
this.$axios({
method:'get',
params:{
input:this.input,
index:0,
size:20
},
url:'/'
})
.then(res =>{
this.items = res.data.data;
})
},
}
}
<script>
utils.js
//节流
let util = {}
util._Throttle = (fn,t) =>{
let last,
timer,
interval = t || 500;
return function () {
let args = arguments;
let now =+ new Date();
if(last && now - last < interval){
console.log(new Date(last))
clearTimeout(timer);
timer = setTimeout(()=>{
last = now;
fn.apply(this,args);
},interval)
}else {
/*最开始执行这一段*/
last = now;
fn.apply(this,args);
}
}
}
export default util;
https://blog.csdn.net/qq_37746973/article/details/78402812
js防抖和节流
参考
