函數節流和函數防抖

函數節流

一個函數執行一次後，只有大於設定的執行週期纔會執行第二次.

function throttle(fn, delay) {
    // 記錄上一次函數觸發的時間
    var lastTime = 0
    return function () {
        // 記錄當前函數觸發時間
        var nowTime = Date.now()
        if (nowTime - lastTime > delay) {
            fn()
         lastTime = nowTime
        }
    }
 }

測試 ：

document.onscroll = throttle(function () {
    console.log('事件觸發' + Date.now())
}, 200)

應用：

• 滾動加載，加載更多或滾動到底部監聽
• 谷歌搜索框，搜索聯想功能
• 高頻點擊提交，表單重複提交

函數防抖

一個須要頻繁觸發的函數 在規定事件內 只讓最後一次生效 前面的不生效

function debounce(fn, delay) {
    // 記錄上一次延時器
    var timer = null
    return function () {
        // 清除上一次的延時器
        clearTimeout(timer)
        // 從新設置新的延時器
         timer = setTimeout(() => {
            fn()
        }, delay)
     }
 }

測試 ：

<button id="btn"> 按鈕</button>

document.getElementById('btn').onclick = debounce(function () {
    console.log('點擊事件被觸發了')
}, 1000)

應用 :

• 手機號、郵箱正則輸入檢測
• 搜索框輸入：用戶最後一次輸入完，再發送請求
• 窗口大小：窗口調整完成後，計算窗口大小，防止重複渲染