函數的防抖與節流

防抖

固定時間去觸發一次

function throttle(func,wait) {
    let prev = 0;
    return function () {
      let now = Date.now();
      if(now-prev>=wait){
        func();
        prev=now;
      }
    }
  }
複製代碼

關於它的使用：

// 每隔5秒纔能有效點擊 button
button.onclick = throttle(function(){
    console.log('log');
},5000)
複製代碼

假如，我在最後一次點擊時，5秒倒計時還沒到，那麼最後一次點擊無效。如今的需求是想把最後一次的點擊也顯示出來

button.onclick = throttle(function(){
    console.log('log');
},5000,{trailing:true}) // 最後一次點擊也觸發

複製代碼

咱們開始寫代碼：

function throttle(func,wait,options) {
    // trailing 最後一次應該觸發（默認觸發）
    let args,context,prev=0,timeout;
    let later = function (params) {
      prev = Date.now();
      func.apply(context,args);
    }
    return function () {
      args = arguments;
      context = this;
      let now = Date.now();
      let remaining = wait - (now - prev);
      if(remaining <=0){//每一個階段的第一次；
        if(timeout){//若是過了5秒中，還在點擊，清除掉剛纔設定的定時器
          clearTimeout(timeout);
          timeout = null;
        }
        func.apply(context,args);
        prev = now;

      }else if(!timeout && options.trailing !== false){
        timeout = setTimeout(later,remaining);
      }
    }
  }
複製代碼

節流

高頻的操做結束後觸發一次,即每次操做在指定的延遲時間內沒有第二次操做，就會觸發。

function debounce(fn,wait){
    let timer = null
    return function(){
        cleatTimeout(timer);
        timer = setTimeout(()=>{
            fn.apply(this,arguments);
        },wait)
    }
}
複製代碼

使用方法：

window.addEventListener('scroll',debounce(function(){
  console.log('scroll')
},500))
複製代碼

若是我想在第一次滾動時，就觸發這個函數，該怎麼作呢？

window.addEventListener('scroll',debounce(function(){
  console.log('scroll')
},500,true)) // true 要求第一次滾動事件也觸發
複製代碼

function debounce(fn,wait){
      let timer = null
      return function(){
          cleatTimeout(timer);
          if(immediate){
            //首次點擊時，執行fn
            !timer?fn.apply(this,arguments):''; 
          }
          timer = setTimeout(()=>{
              fn.apply(this,arguments);
          },wait)
      } 
    }
複製代碼