安利一個js節流庫

sasa-m發表於2019-09-19
原文網址 : https://juejin.im/post/5d834bd4f265da03db07b0ec
JS

它在這裡

github.com/imsasa/ithr…

這樣用

npm install ithrottle
複製程式碼
let debounce=require(ithrottle).debounce;
let throttle=require(ithrottle).throttle;
複製程式碼

debounce

每指定時間 t 內的再次呼叫會促使函式再次延長 t 後執行。

安利一個js節流庫

情景舉例01:

在進行文字框輸入的同時，通常會要求對輸入的內容進行校驗，並即時將檢驗結果反饋給使用者。每錄入一個字元都校驗，是不必要的，因為使用者很可能還要繼續錄入。那麼在使用者停止錄入1秒後執行驗證吧。

let fn=debounce(yourValidateFn,1000);
inputEl.addEventListener("input",fn);
複製程式碼

情景舉例02：

限制點選
如上圖，你希望3s內不管使用者點選按鈕多少次都只有第一次生效，且只有使用者停止點選3秒後才能再次點選。那麼：

let fn=debounce(yourSearchFn,3000,{immediate:true});
searchBtn.addEventListener("click",fn);
複製程式碼

throttle

觸發函式的頻率很高，但又希望函式以固定的較慢的節奏來執行。

安利一個js節流庫

情景舉例03：

安利一個js節流庫
滑鼠移動、視窗縮放之類的事件觸發頻率非常高。上圖中，希望小方塊跟隨跟隨滑鼠移動，可以：

let fn=throttle(yourMoveFn,50);
document.body.onmousemove=()=>fn;
複製程式碼

情景舉例04：

安利一個js節流庫
函式執行後，指定時間t內的呼叫無效。如上圖中獲取驗證碼，我們希望使用者獲取驗證碼的頻率小於 1次/分鐘。那麼：

let fn=throttle(yourGetVerifyCodeFn,60*1000,{immediate:true,leave:true});
btn.on("click",fn);
複製程式碼

擴充套件

  • 使用promise引數得到函式執行後的結果；

    let fn=throttle(()=>"foo"),100,{promise:true});
//fn是一個Promise物件
fn().then((returnValue)=>console.log(returnValue));
複製程式碼

  • 使用方法clear放棄執行函式；

      let fn=throttle(actionFn,100);
  fn();//actionFn會在100ms後執行
  fn.clear()//放棄執行的actionFn
複製程式碼

最後那麼：
加個星吧： github.com/imsasa/ithr…

相關文章