函数节流和防抖实现

HTML 代码

  <div class="app">
        <input type="text" id="inppp" />没有节流防抖的input
        <input type="text" id="debounceid" /> 防抖的input
        <input type="text" id="throttleid" /> 节流的input
    </div>
    <script>
        var inppp = document.getElementById("inppp")
        var debounceid = document.getElementById("debounceid")
        var throttleid = document.getElementById("throttleid")

        // 监听原始事件, 无防抖，节流
        inppp.addEventListener('keyup', function (e) {
            ajax(e.target.value)
        })

        debounceid.addEventListener('keyup', function (e) {
            bebounded(e.target.value)
        })
        throttleid.addEventListener('keyup', function (e) {
            throttled(e.target.value)
        })


        let bebounded = debounce(ajax, 500)
        let throttled = throttle(ajax, 1000)


        // 定义回调函数
        function ajax(content) {
            console.log('ajax request' + content)
        }
    </script>

JS代码：JS文件需要单独引用----------------------- 节流throttle 定时器和时间戳模式二选一

// 简单实现过程！
function debounce(fn, delay) {
    // 定义定时器
    let timer
    return function (args) {
        let that = this
        clearTimeout(timer)
        timer = setTimeout(() => {
            fn.call(that, args)
        }, delay)
    }
}

// 时间戳模式
function throttle(fn, delay) {

    // 定义时间戳
    let previous = 0
    return function (arg) {
        var that = this
        // 将时间变为number
        let newDate = +new Date()

        if (newDate - previous > delay) {
            fn.call(that, arg)
            previous = newDate
        }
    }
}
// 定时器模式
function throttle(fn, delay) {
    let timer
    return function (arg) {
        var that = this
        if (!timer) {
            timer = setTimeout(() => {
                timer = null
                fn.call(that, arg)
            }, delay)
        }
    }
}