JavaScript第九弹——防抖？？？节流？？？

萌兔IT

发布于 2019-07-25 11:12:50

4890

发布于 2019-07-25 11:12:50

文章被收录于专栏：萌兔it萌兔it

Hello小伙伴们，因为Ajax绕去http了几天，今天又回到了JS，今天要为大家介绍的是防抖和节流，听起来就很厉害的样子吧~想必大家在生活中也会经常干这种事情，比如在浏览一个网站的时候，要点击一个按钮，当这个点击动作没有做出反应的时候，用户便会一直不停的按，又或者再有滚动条的页面，不断上下滚动鼠标等等，都会造成不断触发事件甚至不断发送请求，为了防止这个就要采用防抖和节流的方法了。

同样是解决快速连续触发、不可控高频触发，防抖和节流又分别是什么呢，有什么区别呢？让我们一同看看吧~

防抖

多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。（这就是个小傲娇，我执行完就是要等n秒再执行，你再按我再等n秒）

function debounce(fn,time) {
    let timer;
    return function () {
        let self = this;
        timer && clearTimeout(timer);
        timer = setTimeout(function (...args) {
            fn.apply(self,args);
        },time);
    }
}

节流

触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。（说白了就是一直在跑，只不过一定时间就能跑一次，这不就节流了嘛~）

function throttle(fn, time) {
    let timer,start;
    return function func(...args) {
        let self = this;
        let now = Date.now();
        if(timer){
            clearTimeout(timer);
        }
        else if(now - start >= time){
            fn.apply(self, args);
            start = now;
        }else {
            timer = setTimeout(function () {
                func.apply(self, args);
            }, time);
        }
    }
}

今天的内容就到这里啦，总的来说呢，防抖就是合并多次触发操作，节流就是保证一段时间事件就被触发一次，记住了吗~喜欢兔妞的文章请关注+右下角点击好看哟，越点越好看~~么么哒！！！

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-03-04，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax