js節流與防抖的程式碼實現與應用場景簡述

節流

一定時間內只執行一次相關程式碼
適用場景：
圖片懶載入 監聽卷軸
如滑鼠移動事件中onmousemove、卷軸事件等 ，如若事件觸發執行的相關程式碼中有關於DOM節點的相關操作 又或者 ajax 請求介面，會造成計算機的效能的浪費，這種現象是我們不希望見到的
特點：監聽timer這個變數，如果timer為null的時候 才會執行callback

function throttle(callback, wait) {
     var timer = null
     return function () {
          if (!timer) {
               timer = setTimeout(function () {
                    foo()
                    timer = null
              }, wait)
          }
     }
}
function foo() {
    console.log(Math.ceil(Math.random() * 10))
}
window.addEventListener("mousemove", throttle(foo, 2000))

防抖

在一系列頻繁的操作下 只取最後一次（個人理解）
應用場景：
驗證碼六位數 在輸入最後一位後 自動提交表單
在調整螢幕大小時 有些瀏覽器 或者頁面可能會等到調整完成 才會執行callback 避免多次無意義的排版渲染

function throttle(callback, wait) {
    var timer = null
    return function () {
         if (timer) {
             clearInterval(timer)
         }
         timer = setTimeout(function () {
              foo()
              timer = null
         }, wait)
     }
}
function foo() {
    console.log(Math.ceil(Math.random() * 10))
}
window.addEventListener("mousemove", throttle(foo, 2000))

總結：
防抖節流的核心都是setTimeout ，都是為了降低callback的執行頻率 節省計算機資源 優化效能 提高使用者體驗