JS防抖和節流

函數防抖(debounce)

---

概念： 在事件被觸發n秒後再執行回調，若是在這n秒內又被觸發，則從新計時。

生活中的實例： 若是有人進電梯（觸發事件），那電梯將在10秒鐘後出發（執行事件監聽器），這時若是又有人進電梯了（在10秒內再次觸發該事件），咱們又得等10秒再出發（從新計時）。

對於函數防抖，有如下幾種應用場景：

• 給按鈕加函數防抖防止表單屢次提交。
• 對於輸入框連續輸入進行AJAX驗證時，用函數防抖能有效減小請求次數。
• 判斷 scroll 是否滑到底部， 滾動事件 + 函數防抖

代碼(debounce)

function debounce(fn, wait) {
 var timer = null;
 return function () {
  if (timer !== null) {
   clearTimeout(timer);//若是屢次觸發將上次記錄延遲清除掉
  }
  timer = setTimeout(function () {
   fn.apply(this, arguments)
  }, wait)
 }
}
// 處理函數
function handle() {
  console.log(Math.random());
}
// 事件
window.addEventListener("scroll", debounce(handle, 1000)); //滾動結束一秒後打印

setInterval(debounce(handle,2000),1000) // 不會觸發一次（我把函數防抖看出技能讀條，若是讀條沒完成就用技能，便會失敗並且從新讀條）

函數節流(throttle)

---

概念： 規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回調函數執行，若是在同一個單位時間內某事件被觸發屢次，只有一次能生效。

生活中的實例： 咱們知道目前的一種說法是當 1 秒內連續播放 24 張以上的圖片時，在人眼的視覺中就會造成一個連貫的動畫，因此在電影的播放（之前是，如今不知道）中基本是以每秒 24 張的速度播放的，爲何不 100 張或更可能是由於 24 張就能夠知足人類視覺需求的時候，100 張就會顯得很浪費資源。

對於函數節流，有以下幾個場景：

• 遊戲中的刷新率
• DOM元素拖拽
• Canvas畫筆功能

代碼(throttle)

//時間戳方式
function throttle(fn, gapTime) {
 let _lastTime = null;
 return function () {
 let _nowTime = + new Date()
 if (_nowTime - _lastTime > gapTime || !_lastTime) {
  fn();
  _lastTime = _nowTime
 }
 }
}
// 處理函數
let handle = ()=>{
 console.log(Math.random())
}
// 事件函數
window.addEventListener('scroll',throttle(handle,1000))


//定時器方式
let throttle = function(func, delay) {
    let timer = null;
    return ()=> {
      if (!timer) {
        timer = setTimeout(()=> {
          func.apply(this, arguments);
          timer = null;
        }, delay);
      }
    };
  };
  
  function handle() {
    console.log(Math.random());
  }
  window.addEventListener("scroll", throttle(handle, 1000));