js文件
// 防抖
export const fangDouFun = (fn, delay, immediate) => {
var time = null,
result; //被缓存
return function() {
let context = this;//记录一下this指向
let args = arguments;
//清除定时任务
if (time) clearTimeout(time);
// 第一次点击是否立即执行
if (immediate) {
result = fn.apply(context, args)
immediate = false;
// 超过delay时间immediate重置为true
time = setTimeout(function() {
time = null;
immediate = true;
}, delay)
} else {
time = setTimeout(function() {
time = null;
result = fn.apply(context, args)
immediate = true;
}, delay)
}
return result
}
}
// 节流
export const jieliuFun=(fn, delay) => {
// 时间戳
var timeTwo = 0 //new Date();
// 定时器
var timeThree = null;
return function() {
let context = this;
let args = arguments;
var now = new Date()
// !!!!时间戳实现【new Date()虽然获取结果不是时间戳但是计算结果会自动转化为时间戳】
// if(now-timeTwo>=delay){
// fn.apply(context,args);
// timeTwo=new Date();
// }
// !!!!定时器实现
// if (!timeThree) {
// timeThree = setTimeout(function () {
// fn.apply(context, args);
// timeThree=null;
// }, delay)
// }
// 结合 ps:最后一次触发在固定频率内会在延迟后触发
var wait = delay - (now - timeTwo)
clearTimeout(timeThree)
if (wait <= 0) {
fn.apply(context, args);
timeTwo = new Date();
} else {
timeThree = setTimeout(function() {
fn.apply(context, args);
}, delay)
}
}
}
在需要使用的vue页面引入
import { fangDouFun, jieliuFun } from '@/utils/debounceThrottle'
template中
<van-search
v-model="searchVal"
show-action
:placeholder="placeholderVal"
@search="onSearch"
@cancel="onCancel"
@input="onInput"
/>
data中
searchVal:"",
watch:{
// searchVal(news){
// this.onInput(news)
// }
},
watch中的可以不用
举例防抖
onInput:fangDouFun(function(val){
this.blockShow = 2;
console.log(val);
// 发送请求,获取实时搜索的文本提示的数据列表
GetSearchTipsListData({keyword:val}).then(res=>{
if(res.errno == 0){
this.searchTipsListData = res.data
}
})
},3000),
感谢优秀博主
coderDeng