Vue对watch监听的v-model进行异步请求时应进行节流
throttlefunction throttle(fn,context,param=[],delay=500,mustApplyTime=1000){fn.timer&&clearTimeout(fn.timer);fn._cur=Date.now();fn._start =fn._start||fn._cur;if(fn._cur-fn._start&.
·
throttle
function throttle(fn,context,param=[],delay=500,mustApplyTime=1000){
fn.timer&&clearTimeout(fn.timer);
fn._cur=Date.now();
fn._start =fn._start||fn._cur;
if(fn._cur-fn._start>mustApplyTime){
fn.apply(context,param);
fn._start=fn._cur;
}else{
fn.timer=setTimeout(function(){
fn.apply(context,param);
},delay);
}
}
watch
由于watch是实时触发的,在此进行异步请求常常会导致不必要的性能损耗
watch:{
keyword(cur){
throttle(this.onInputSearch,null,[cur])
}
onInputSearch(keyword){
console.log("throttle input search:",keyword);//耗时操作
}
<input v-model="keyword" placeholder="小浣熊"/>
更多推荐
已为社区贡献16条内容
所有评论(0)