小議函數的節流和防抖

why

在前端開發中有一部分用戶行爲會頻繁的觸發事件執行，而對於DOM的操做、資源加載等耗費性能的處理，極可能會致使界面卡頓，甚至瀏覽器奔潰。函數的節流與防抖就是爲了解決相似需求而產生的。

概念及應用

1. 節流：函數的節流就是預約一個函數只有在大於等於執行週期時纔會執行，週期內調用不會執行。
   主要應用場景有：scroll、touchmove
2. 防抖：抖動中止後的時間超過設定的時間時執行一次函數。注意：這裏的抖動中止表示你中止了觸發這個函數，從這個時間點開始計算，當間隔時間等於你設定時間，纔會執行裏面的回調函數。若是你一直在觸發這個函數而且兩次觸發間隔小於設定時間，則必定不會到回調函數那一步。
   主要應用場景有：input驗證、搜索聯想、resize

實現思路

節流實現思路就是定一個時間間隔，在這個時間間隔範圍內，只會執行一次函數。
防抖實現思路是首次運行時把定時器賦值給一個變量，第二次執行時，若是間隔沒超過定時器設定的時間則會清除掉定時器，從新設定定時器，依次反覆，當咱們中止下來時，沒有執行清除定時器，超過必定時間後觸發回調函數

code

1. 節流函數

// 1. 思考不用定時器能夠實現麼，讓咱們試試
 function throttle(fn, delay = 1000) {
    var time = Date.now();
    return function() {
       if(Date.now()-time > 1000) {
          fn();
          time = Date.now();
       } else {
          return;
       }
    }
 }
// 2. 有定時器爲何不用呢，哈哈哈
 function throttle(fn, delay = 1000) {
    var timer = null;
    return function(){
       if (timer) {return;}
       else {
          timer = setTimeout(()=>{
             fn.call(this,arguments);
             timer = null;
          },delay);
       }
    }
 }
 // test 
 window.addEventListener('scroll', throttle(foo,1000));
 function foo() {
    console.log('hello')
 }

1. 防抖函數

// 1. 無定時器
 // function debounce(fn, delay = 1000) {
 //   var time = Date.now();
 //   return function(){
 //      if(Date.now()-time > 1000) {
 //         fn();
 //      } else {
 //         time = Date.now();
 //         return;
 //      }
 //   } 
 // }
  // 2. 有定時器
 function debounce(fn, delay = 1000) {
    var timer = null;
    return function(){
       clearTimeout(timer);
       timer = setTimeout(()=>{
          fn.call(this,arguments);
          timer = null;
       },delay);
    }
 }
 // test 
 window.addEventListener('scroll', debounce(foo,1000));
 function foo() {
    console.log('hello')
 }

參考

• JavaScript 高級程序設計 第22章 22.3.3函數節流 [美] Nicholas C.Zakas
• js函數節流與防抖如何實現
• JS節流和防抖的區分和實現詳解
• JavaScript函數節流和函數防抖之間的區別