我叫大王来巡山

导航

 

一、防抖

  原理:在事件被触发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)
        }
    }
}

 

posted on 2020-10-21 23:40  我叫大王来巡山  阅读(170)  评论(0编辑  收藏  举报