函数节流（throttle） 函数防抖（debounce）

JS的函数防抖与节流

• 搜索框输入文字后的联想。当用户频繁的输入应该在用户最后一次输入完成后进行提醒。这就是防抖(debounce)
• scroll事件有可能每秒触发50次，但是触发次数太多会消耗性能。让滚动事件每秒最多执行5次，就是节流(throttle)

函数防抖

function debounce(fn, delay = 1000) {
    var timer
    return function () {
        let args = arguments
        let context = this
        clearTimeout(timer)
        timer = setTimeout(() => {
            fn.call(context, args[0].value)
        }, delay);
    }
}

函数节流

时间戳方案

function throttle(fn, delay = 1000) {
   let last = new Date()
    return function () {
        let context = this
        let args  = arguments
        if(new Date() - last >= delay) {
            fn.call(context, args[0].value)
            last = new Date()
        }
    }
}

定时器方案

function throttle2(fn, delay = 1000) {
   let timer = null
    return function () {
        let context = this
        let args  = arguments
        if(timer === null) {
            timer = setTimeout(() => {
                fn.call(context, args[0].value)
                timer = null
            }, delay);
        }
    }
}

问题

节流函数：当用户最后一次操作在delay事件之内，但是与最后一次执行的参数不同，就会有问题。意思就是要求当用户完成最后操作后总要执行一次。

这里使用闭包，会不会引起内存泄漏？
闭包不会造成内存泄漏。程序写错了才会造成内存泄漏。

函数节流的使用场景

• 懒加载、滚动加载、加载更多或监听滚动条位置；
• 百度搜索框，搜索联想功能；
• 防止高频点击提交，防止表单重复提交；