防抖节流函数

Posted 2020-12-20 yaxinwang

一、防抖

　　原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

　　场景：

　　　　1.按钮提交场景，防止多次提交按钮，只执行最后一次的提交

　　　　2.搜索框联想场景，防止联想发送请求，只发送最后一次输入

　　简易版：

function debounce (func, wait) {
    let timeout
    return function () {
        const context = this
        const args = arguments
        clearTimeout(timeout)
        timeout = setTimeout(function () {
            func.apply(context, args)
        }, wait)
    }
}

　　立即执行版：

　　　　有时希望立刻执行函数，然后等到停止触发n秒后才可以重新触发执行

function debounce (func, wait, immediate) {
    let timeout
    return function () {
        const context = this
        const args = arguments
        if (timeout) clearTimeout(timeout)
        if (immediate) {
            const callNow = !timeout
            timeout = setTimeout(function () {
                timeout = null
            }, wait)
            if (callNow) func.apply(context, args)
        } else {
            timeout = setTimeout(function () {
                func.apply(context, args)
            }, wait)
        }
    }
}

二、节流

　　原理：规定在一个单位时间内，只能触发一次函数。如果这个函数在这个单位时间内触发多次函数，只有一次生效

　　场景：

　　　　1.拖拽：固定时间内只执行一次，防止超高频次触发位置变动

　　　　2.缩放：监控浏览器resize

function throttle (func, wait) {
    let timeout
    return function () {
        const context = this
        const args = arguments
        if (!timeout) {
            timeout = setTimeout(function () {
                timeout = null
                func.apply(context, args)
            }, wait)
        }
    }
}