Vue对watch监听的v-model进行异步请求时应进行节流

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="小浣熊"/>