【干货】防抖与节流

废话不多说,开箱即用

# HTML

<h2>防抖与节流</h2>

<input class="antiShake" placeholder="请输入-防抖">

<div class="throttle">节流</div>

# 防抖

/**
 * @func 防抖:用户短时间内多次触发请求,只发起最后一次,将多个请求变成一次
 * @desc 核心:一定时间内没有继续操作后执行处理函数。时间范围内只要来新请求,立刻取消上一次操作。新请求比老请求更有业务价值
 * @desc 经典案例:模糊搜索
 */
let telInput = document.querySelector('.antiShake')

// 未防抖情形
// telInput.addEventListener('input', (e) => {
//     request()
// })

// 加了防抖 - antiShake通过闭包返回了函数
telInput.addEventListener('input', antiShake(request, 2000))

// 防抖函数 (本案例利用闭包实现,这样无需再antiShake外部定义timeout变量)
function antiShake(fn, wait) {
    let timeout = null
    return args => {
        if (timeout) clearTimeout(timeout)
        timeout = setTimeout(fn, wait)
    }
}

function request() {
    console.log('发起请求了')
}

# 节流

/**
 * @func 节流:用户的某些操作导致重复的发起相同的请求,只发起第一次
 * @desc 应用场景:提交表单,点击提交按钮,告片的监听事件如touchmove
 */
let box = document.querySelector('.throttle')

// 未节流情形
// box.addEventListener('touchmove', (e) => {
//     request()
// })

// 加了节流:
box.addEventListener('touchmove', throttle(request, 2000))

// 节流函数:触发后开始计时,时间间隔内再过来的请求直接忽略,计时完成执行函数后,再接收下一个请求
function throttle(event, wait) {
    let timer = null
    return args => {
        if (!timer) {
            timer = setTimeout(() => {
                event()
                timer = null
            }, wait)
        }
    }
}

function request() {
    console.log('发起请求了')
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容