函数节流（throttle）与函数去抖（debounce）

前言

作过前端的童鞋应该都知道lodash这个强大的使用工具库。为何要写这篇文章呢，主要今天遇到一个问题，socket推送消息太频繁，致使saga频繁更新，页面有所卡顿，须要经过函数节流控制，发现本身忽然不会写这样的代码，并且模糊了节流和抖动的区别。简单实现一下，源码其实复杂的多。

区别

节流：一些场景频繁触发，致使页面崩溃，资源加载重复等行为，须要控制执行频率，这个时候就叫作节流。
去抖：主要针对的是频繁触发某个事件后，而后进行后续处理的场景。常见的就是频繁输入中止3s(假设)后进行查询等操做。

_.debounce

• 函数接口定义：

@param fn实际须要调用的函数
@param second 空闲时间
@return callback 返回调用函数

const debounce = (fn, second) => {
    let timer = null
    return () => {
        clearTimeout(timer)
        timer = setTimeout(() =>{
            fn()
        }, second)
    }
}

_.throttle

• 函数接口定义：

@param delay延迟时间
@param fn须要调用的函数
@return cb返回函数

const throttle = (fn, delay) => {
    let last = 0
    return () => {
        let current = new Date()
        if(current-last > delay) {
           fn()
           last = current
        }
    }
}