防抖和节流

孙泽辉

发布于：2021年7月21日

字数：285字

时长：1分钟

次浏览

最近看哈老师说到频繁点击按钮会发送多个请求，用锁解决。是个好办法，但感觉low了点，今天试试用优雅点的方式解决！

哈老师的视频：

使用锁避免重复请求【JS小技巧】_哔哩哔哩_bilibili

防抖和节流

防抖：

如果短时间内大量触发同一事件，只会执行一次函数。

const debounce = (function(){
    let id = null;
    return function(cb,timeout) {
        // 取消当前计时，重新开一个
        if(id)clearTimeout(id);
        id = setTimeout(()=>cb(), timeout);
        return id;
    }
})()

节流：

如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

function throttle(cb,timeout) {
    let id = null;
    return function(){
        // id表示正在有运行
        if (id) return;
        id = setTimeout(() => {
            // 过了1000毫秒以后才把id清了，就可以再开一个timeout
            clearTimeout(id)
            id = null;
            cb()
        }, timeout);
    }
}

该用哪个？

快速点好几下按钮只让他触发一次，所以选防抖

参考

• 浅谈 JS 防抖和节流 - SegmentFault 思否