js振れ防止関数とスロットル関数

目次
ジッタ防止関数
コード#コード# 
使用
しぼりかんすう 
コード#コード# 
使用
ジッタ防止関数
delay時間内にこの関数が複数回トリガーされると再カウントされます
 適用シーン
1.リスニング画像のロードが完了したかどうか、画像のloadイベントで、頻繁にトリガーされ、使用可能
2.キーボードのkeyupイベントは、ユーザーが入力を停止したときに要求を送信し、使用可能
コード#コード# 

//      ,             
export function debance(func, delay) {
  //       
  let timer = null;
  return function(...args) {
    //      ，   ，   
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}

使用

 //       
 this.refresh = debance(this.$refs.detailScroll.refresh, 100)

 //       
 this.$bus.$on('detailGoodsItemImgLoad', () => {
    this.refresh();
 })

しぼりかんすう 
delay単位時間では、関数は1回しかトリガーできません.この時間内に複数の関数がトリガーされると、1回だけ有効になります.
適用シーン
1.一定時間ごとにネットワーク要求を行う必要がある場合は、
2.マルチキャストマップの頻繁なトリガスライドは、ある時間に一度しかスライドできないように設定し、使用可能
コード#コード# 

//    
function throttle(fn,delay) {
    //      
    let lock= true; 
    return function (...args) {
        //     ，     
        if (!lock) return;
        //    ，   ，       false
        lock= false;
        setTimeout(() => { 
            fn.apply(this, args);
            //    ，  
            lock= true;
        }, delay);
    };
}

使用

 function demo(){
   console.log('----')
 }
 //      
 this.refresh = throttle(demo, 100)

 //      
 this.$bus.$on('detailGoodsItemImgLoad', () => {
    this.refresh();
 })