防抖(debounce)

描述：如果短時間內大量觸發(fā)同一事件，希望在事件連續(xù)觸發(fā)的過程中并不執(zhí)行其回調函數(shù)，而是等到最后一次觸發(fā)后，等待一小會再執(zhí)行回調

任務：

1. 第一次觸發(fā)時，嘗試在一小會后執(zhí)行 （舉個??：老王去做賊，先到你家門口觀察一小會，伺機行動）
2. 后續(xù)連續(xù)的觸發(fā)需要抑制回調的執(zhí)行 （老王：有人路過，取消行動，等5分鐘看看情況....終于，沒人路過了，開干?。?/li>

function debounce(fn, delay) {
    let timer = null
    return function() {
        if(timer) {
            clearTimeout(timer) // 連續(xù)觸發(fā)時，取消第一次觸發(fā)時建立的setTimeout
        }
        timer = setTimeout(() => {
            fn()
        }, delay)
    }
}

上面的代碼有個問題：fn不支持傳遞參數(shù)，我們來改寫一下

function debounce(fn, delay) {
    let _self = fn
    let timer = null
    return function() {
        let args = arguments // 類似select@change，回調函數(shù)是有參數(shù)的
        let _me = this
        if(timer) {
            clearTimeout(timer) // 連續(xù)觸發(fā)時，取消第一次觸發(fā)時建立的setTimeout
        }
        timer = setTimeout(() => {
            _self.apply(_me, args)
        }, delay)
    }
}

節(jié)流（throttle）

描述：同樣是短時間大量觸發(fā)同一事件的場景下，我們希望回調函數(shù)有節(jié)制地執(zhí)行，比如200ms執(zhí)行一次

場景：

1. 在具有search功能的input中執(zhí)行doSearch查詢，用戶的輸入是連續(xù)的，如果不做限制，每輸入一個字符則執(zhí)行一次查詢
2. 比如在畫板中監(jiān)聽鼠標移動(mousemove),并在位置信息文本中更新對應的位置，mousemove事件的執(zhí)行頻率非?？?scroll，resize也是類似的)，則更新dom的頻率是極高的，然而用戶其實并不需要如此高的通知頻率，一秒鐘更新2，3次即可 (畫板的例子有個特殊需求，最后一次也必須執(zhí)行，可以思考下)

舉個不成熟的??：你（亞索）和小明（石頭人）玩LOL

1. 快R對面中單
2. 好嘞，我剛學大招（第一次），Boom....suo li a ka tong，漂亮
3. R它
4. Boom....suo li a ka tong，你開始有點上頭 （假設第一次放大招沒有冷卻）
5. R它...R它...R它
6. 老大，我的技能在冷卻啊，等好了再來
7. R它...R它...R它
8. 你別催了，技能好了就來

任務：

1. 首次執(zhí)行時，跳過限制，直接執(zhí)行
2. 首次執(zhí)行過后及后續(xù)每次執(zhí)行后的一段時間(delay)內，不執(zhí)行

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()前面，函數(shù)的執(zhí)行需要時間，時效性考慮
            timer = null
            _self.apply(_me, args)
        }, interval || 200)
    }
}