防抖和节流

函数防抖

函数防抖，debounce，将多个信号合并为一个信号。

用户触发事件，将在5秒后开始执行程序，如果用户在5秒内又触发事件，就需要继续重新计时5秒，然后再执行。

代码实现：

function debounce(fn, delayTime){
    let timer
    return function(){
        clearTimeout(timer)
        let context = this
        let args = arguments
        timer = setTimeout(()=>{
            fn.apply(context, args)
        },delayTime)
    }
}
var a = debounce(function(e){console.log('延迟了')},
                 1000)

document.querySelector('input').addEventListener('input',a)

应用场景

• 每次resize/scroll 触发统计事件
• 文本输入的验证（连续输入文字后发送AJAX请求进行验证）

函数节流

函数节流，throttle

用户触发事件，开始计时5秒，每5秒执行一次，如果没有触发，就不执行。

function throttle (fn, time) {
    let timeout
    let start = new Date
    let time = time || 200
    return function(){
        let context = this
        let args = arguments
        let current = new Date() - 0
        clearTimeout(timeout)
        
        if(current - start >= time){
            fn.apply(context, args)
            start = current
        }else{
            timeout = setTimeout(()=>{
            fn.apply(context, args)
            },time)
        }
    }
}

应用场景

• DOM元素的拖拽功能（mousemove）
• 计算鼠标的移动距离（mousemove）
• canvas模拟画板功能（mousemove）
• 搜索联想（keyup）
• 监听滚动事件判断时候到达页面底部，自动加载更多（给scroll家debounce，只有用户停止滚动，才会是否到了底部；而throttle，只要页面滚动就会间隔一段时间判断一次）