防抖(debounce)

描述：如果短时间内大量触发同一事件，希望在事件连续触发的过程中并不执行其回调函数，而是等到最后一次触发后，等待一小会再执行回调

任务：

第一次触发时，尝试在一小会后执行（举个🌰：老王去做贼，先到你家门口观察一小会，伺机行动）
后续连续的触发需要抑制回调的执行（老王：有人路过，取消行动，等5分钟看看情况....终于，没人路过了，开干！）

function debounce(fn, delay) {
    let timer = null
    return function() {
        if(timer) {
            clearTimeout(timer) // 连续触发时，取消第一次触发时建立的setTimeout
        }
        timer = setTimeout(() => {
            fn()
        }, delay)
    }
}

上面的代码有个问题：fn不支持传递参数，我们来改写一下

function debounce(fn, delay) {
    let _self = fn
    let timer = null
    return function() {
        let args = arguments // 类似select@change，回调函数是有参数的
        let _me = this
        if(timer) {
            clearTimeout(timer) // 连续触发时，取消第一次触发时建立的setTimeout
        }
        timer = setTimeout(() => {
            _self.apply(_me, args)
        }, delay)
    }
}

节流（throttle）

描述：同样是短时间大量触发同一事件的场景下，我们希望回调函数有节制地执行，比如200ms执行一次

场景：

在具有search功能的input中执行doSearch查询，用户的输入是连续的，如果不做限制，每输入一个字符则执行一次查询
比如在画板中监听鼠标移动(mousemove),并在位置信息文本中更新对应的位置，mousemove事件的执行频率非常快(scroll，resize也是类似的)，则更新dom的频率是极高的，然而用户其实并不需要如此高的通知频率，一秒钟更新2，3次即可 (画板的例子有个特殊需求，最后一次也必须执行，可以思考下)

举个不成熟的🌰：你（亚索）和小明（石头人）玩LOL

快R对面中单
好嘞，我刚学大招（第一次），Boom....suo li a ka tong，漂亮
R它
Boom....suo li a ka tong，你开始有点上头（假设第一次放大招没有冷却）
R它...R它...R它
老大，我的技能在冷却啊，等好了再来
R它...R它...R它
你别催了，技能好了就来

任务：

首次执行时，跳过限制，直接执行
首次执行过后及后续每次执行后的一段时间(delay)内，不执行

function throttle(fn, interval) {
    let isFirstTime = true
    let timer = null
    return function() {
        let args = arguments
        let _me = this
        if(isFirstTime) {
            _self.apply(_me, args)
            isFirstTime = false
            return false
        }
        if(timer) {
            return false
        }
        timer = setTimeout(() => {
            clearTimeout(timer) // 注意为什么写在_self.apply()前面，函数的执行需要时间，时效性考虑
            timer = null
            _self.apply(_me, args)
        }, interval || 200)
    }
}