【WEB前端-面試】JS防抖、節流

防抖debounce的基本思路：

• 當持續觸發事件（輸入/點選等）一定時間内沒有再觸發事件事件處理函數才會執行一次。如果設定的時間到來之前又一次觸發了事件就重新開始延時。隻讓最後一次生效，前面的不生效。

<button id='btn'>按鈕</button>
<script type="text/javascript">
function debounce(fn, delay) {
    // 記錄上一次的延時器
   var timer = null;
    return function() {
    // 清除上一次延時器
    clearTimeout(timer)
    timer = setTimeout(function() {
            fn.apply(this)
        }, delay)
    }
}
document.getElementById('btn').onclick = debounce(function() {
    console.log('點選事件被觸發' + Date.now())
}, 1000)
</script>

           

• 應用場景：
  • 每次 resize/scroll 觸發統計事件
  • 文本輸入的驗證（連續輸入文字後發送 AJAX 請求進行驗證，驗證一次就好）

節流的基本思路：

• 規定一個期限時間，在該時間内，觸發事件的回調函數隻能執行一次，如果期限時間内回調函數被多次觸發，則隻讓第一次能生效。
• 函數的節流通過閉包儲存一個标記，判斷是否

function throttle(fn, delay) {
    // 記錄上一次函數觸發的時間
    var lastTime = 0;
    return function() {
        // 記錄目前函數觸發的時間
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
        // 修正this指向問題
            fn.call(this);
        // 同步時間
          lastTime = nowTime;
        }
    }
}
document.onscroll = throttle(function() { console.log('scroll事件被觸發了' + Date.now()) }, 200)

           

• 應用場景
  • DOM 元素的拖拽功能實作（mousemove）
  • 搜尋聯想（keyup）
  • 計算滑鼠移動的距離（mousemove）
  • Canvas 模拟畫闆功能（mousemove）
  • 射擊遊戲的 mousedown/keydown 事件（機關時間隻能發射一顆子彈）
  • 監聽滾動事件判斷是否到頁面底部自動加載更多：給 scroll 加了 debounce 後，隻有使用者停止滾動後，才會判斷是否到了頁面底部；如果是 throttle 的話，隻要頁面滾動就會間隔一段時間判斷一次。