函数防抖和函数节流

函数防抖

应用场景一：浏览器窗口尺寸发生改变

        let handle = debounce(function (width) {
            console.log(width)
        }, 1000)

        window.onresize = function () {
            handle(document.documentElement.clientWidth)
        }

应用场景二：input元素的值不断改变时

    <input type="text" name="" id="">
  
        let int = document.querySelector("input")
        let bundle = debounce(function (value, that) {
            console.log(value)
            console.log(that)
        }, 1000)
        int.oninput = function () {
            bundle(this.value, this)
        }

函数防抖代码实现

function debounce(callback, delay) {
    let timer = null
    return function (..args) {
            clearTimeout(timer)
        timer = setTimeout(function => {
            callback.apply(null, args)
        }, delay)
    }
}

函数节流

 应用场景一：浏览器窗口尺寸发生改变

        let handle = debounce(function (width) {
            console.log(width)
        }, 1000)

        window.onresize = function () {
            handle(document.documentElement.clientWidth)
        }

应用场景二：input元素的值不断改变时

    <input type="text" name="" id="">
  
        let int = document.querySelector("input")
        let bundle = debounce(function (value, that) {
            console.log(value)
            console.log(that)
        }, 1000)
        int.oninput = function () {
            bundle(this.value, this)
        }

函数节流代码实现

有两种情况：

1.立即执行，使用时间戳

2.延迟执行，和防抖的实现大同小异

function debounce(callback, delay, immediately) {

    if (immediately) {
        let time
        return function () {
            if (!time || Date.now() - time >= delay) {
                callback.apply(null, arguments)
                time = Date.now()
            }
        }
    }
    else {
        let timer
        return function (...args) {
            if (timer) {
                return
            }
            timer = setTimeout(function => {
                callback.apply(null, args)
                //没有显式取消定时器（定时器仍会在后台触发）
                //只是移除了对定时器ID的引用
                timer = null
            }, delay)
        }
    }
}