防抖(debounce)、节流(throttle)及使用场景

防抖：在事件被触发的n秒后再执行回调，如果在这n秒内又被触发，则重新计时，核心在于清零，最后一次有效。使用场景： 窗口resize事件，搜索框输入联想
节流：在单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数， 只有第一次有效,核心在于开关锁。使用场景：多次点击按钮，页面滚动事件。

1. 节流 throttle

/**
 * 节流--点击事件、浏览器滚动事件。第一次有效
 * @param {Function} func 需要节流的函数
 * @param {Int} wait 等待时间，默认500ms
*/
export const throttle = (fn, wait = 500) => {
    var timer = null
    return function (...args) {
        if (timer) return
        fn.apply(this, args)
        timer = setTimeout(() => {
            clearTimeout(timer)
            timer = null
        }, wait)
    }
}

2. 防抖 debounce

/**
 * 防抖--搜索框输入，窗口resize事件。最后一次有效
 * @param {Function} func 需要防抖的函数
 * @param {Int} wait 等待时间，默认500ms
 */
export const debounce = (fn, wait = 500) => {
    var timer = null
    return function (...args) {
        clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, wait)
    }
}

在vue项目中的使用