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

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

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

防抖

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

代码语言:javascript
复制
代码语言:javascript
复制
function debounce(fn,time) {
    let timer;
    return function () {
        let self = this;
        timer && clearTimeout(timer);
        timer = setTimeout(function (...args) {
            fn.apply(self,args);
        },time);
    }
}
代码语言:javascript
复制

节流

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

代码语言:javascript
复制
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);
        }
    }
}

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