vue中的防抖和節流

防抖：觸發高頻事件后n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。

使用場景：頻繁觸發、輸入框搜索

因為防抖的特性，一直執行最后一次的觸發，所以可以用於鼠標移動確定最后一次移動的時候的坐標位置。

export const Debounce = (fn, t) => {
  let delay = t || 500;
  let timer;
  return function () {
    let args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      timer = null;
      fn.apply(this, args);
    }, delay);
  };
};

實例

<template>
 <div>
  <input type='text' v-model='value' @keydown = "hangleChange">
 </div>
</template>

<script>
function debounce(func, wait=1000){ //可以放入項目中的公共方法中進行調用
 let timeout;
 return function(event){
  clearTimeout(timeout)
  timeout = setTimeout(()=>{
   func.call(this, event)
  },wait)
 }
}
export default{
 name:'',
 data(){
  return{
   value:''
  }
},
 methods:{
  hangleChange:debounce(function(e){
   console.log(this.value)
  })
 }
}
</script>

 

節流：高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函數的執行頻率

使用場景：頻繁觸發、onrize，onscroll滾動條

因為節流是監聽到第一次觸發事件后就執行，所以可以用來防止按鈕多次點擊執行多次，且按照第一次點擊的事件為准

export const Throttle = (fn, t) => {
  let last;
  let timer;
  let interval = t || 500;
  return function () {
    let args = arguments;
    let now = +new Date();
    if (last && now - last < interval) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        last = now;
        fn.apply(this, args);
      }, interval);
    } else {
      last = now;
      fn.apply(this, args);
    }
  };
};

實例

<template>
 <div class="scroll" ref="previewText" @scroll.passive="fnScroll">
</template>
<script>
 export default{
  name:'globalHospot',
  data(){
    return{
      count:0,
      fnScroll:() =>{}
    }
  },
  methods: {
    fnHandleScroll (e) {
      console.log('scroll觸發了：' + this.count++, new Date())
    },
    fnThrottle(fn, delay, atleast){  //節流函數
      let timer = null;
      let previous = null;
      return function(){
        let now = +new Date()
        if(!previous) previous = now;
        if(atleast && now - previous > atleast){
          fn();
          previous = now;
          clearTimeout(timer)
        }else{
          clearTimeout(timer)
          timer = setTimeout(()=>{
            fn();
            previous = null
          },delay)
        }
      }
    }
  },
  created(){
    this.fnScroll = this.fnThrottle(this.fnHandleScroll, 1000)  //剛創建時執行
  },
}
</script>