函数节流和防抖实现

HTML 代码

  

        没有节流防抖的input
         防抖的input
         节流的input
    
    

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)
        }
    }
}