一般情况下输入内容后,筛选对应的数据内容,如果每次输入每次请求过于频繁,使用节流的方式来减少请求的情况;
watch: {
'params.search'(newVal,oldVal){
//添加空格不做处理
if(newVal.trim() == oldVal.trim()) return;
// 输入框防抖
clearTimeout(this.debounceTimer);
// 每次进来的时候都将之前的清除掉,如果还没到毫秒的时候就将之前的清除掉,
// 这样就不会触发之前setTimeout绑定的事件,
// 如果超过毫秒,之前的事件就会被触发下次进来的时候同样清除之前的timer
this.debounceTimer = setTimeout(()=>{
//输入框没值了,清空搜索框条件数据
this.getStorkList(this.params);
},500) //几毫秒进行
}
},
方法二:
let _throttleRunning = null, _debounceTimeout = null
/**
* 防抖
* @param {Function} 执行函数
* @param {Number} delay 延时ms
*/
export const debounce = (fn, delay= 500) => {
clearTimeout(_debounceTimeout)
_debounceTimeout = setTimeout(() => {
fn()
}, delay)
}
/**
* 节流
* @param {Function} 执行函数
* @param {Number} delay 延时ms
*/
export const throttle = (fn, delay= 500) => {
if (_throttleRunning) {
return
}
_throttleRunning = true
fn()
setTimeout(() => {
_throttleRunning = false
}, delay)
}
方法三
let timerNull = null
export function debounceAnd(func, wait, immediate = false) {
if(timerNull) clearTimeout(timerNull)
if (immediate) {
// 节流
let callNow = !timerNull
timerNull = setTimeout(() => {
timerNull = null
}, wait)
if (callNow) typeof func === 'function' && func();
} else {
// 防抖
timerNull = setTimeout(() => {
typeof func === 'function' && func()
}, wait)
}
}
仅供参考,内容待完善!