节流与防抖（转）

防抖函数

定义： 多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行
例：监听页面滚动， 滚动时不会触发事件处理函数， 而是在滚动完成后一段时间， 触发事件回调

// 代码封装
function debounce (callback, delay) {
    let timer
    return function (...arg) {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(function () {
            callback.apply(this,arg)
        }, delay)
    }
}

// 调用
window.onscroll = debounce (function (e) {
       let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
       console.log(e)
       console.log(`滚动条位置：${scrollTop}`)
   }, 10)

节流函数

定义： 触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
例： 监听页面滚动， 定义每隔500ms触发一次回调事件

// 代码封装
function throttle (callback, delay) {
    let flag = true
    return function (...arg) {
        if (flag) {
            flag = false
            setTimeout(function () {
                callback.apply(this, arg)
                flag = true
            }, delay)
        }
    }
}

// 调用
window.onscroll = throttle(function (e) {
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
      console.log(e)
      console.log(`滚动条位置：${scrollTop}`)
  }, 10)

转自https://blog.csdn.net/qq867263657/article/details/89208887