专栏首页萌兔itJavaScript第九弹——防抖???节流???

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

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);
        }
    }
}

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

本文分享自微信公众号 - 萌兔it(mengtu_it),作者:萌兔IT

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript第十九弹——ES6(8)Generator

    Generator与Promise相同,都是ES6异步编程的解决方案。其实Generator就可以看做一个函数,返回的是一个遍历器对象,而这个返回的遍历器对象可...

    萌兔IT
  • JavaScript入门总结第四弹——函数+十分钟了解闭包

    Hello~~偶又来咯,昨天有小可爱说数组有点随意,其实数组的应用的比较广泛,但是并不是很难,主要是不容易都记住,所以兔妞就是给大家将数组进行了...

    萌兔IT
  • 数据结构于JS也可以成为CP(三)栈

    Hello小伙伴们大家好,今天要为大家带来的是栈,这是数据结构中常用到的一种结构。它和列表有一点相似,又有些不同。相对于列表来说,栈更加高效,为啥呢,因为栈只能...

    萌兔IT
  • lucene全文搜索之二:创建索引器(创建IKAnalyzer分词器和索引目录管理)基于lucene5.5.3

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    eguid
  • 滴滴研究院副院长叶杰平:深度学习在交通领域应用潜力巨大【北大AI公开课第9讲】

    【新智元导读】 在北大 AI 公开课第9讲上,滴滴出行副总裁、滴滴出行研究院院长叶杰平老师,和北大人工智能创新中心主任、曾经的“百度七剑客”之一雷鸣老师一道,为...

    新智元
  • 《连线》创始主编凯文·凯利:大数据将横扫一切

    如果我们穿越到1980年,告诉那时的人,30年以后你们会有维基百科,会有今天各种各样很酷的技术,没有人会相信。展望今后20年,也是今天的我们难以想象的。我唯一知...

    华章科技
  • Innodb的B+树索引(1)

    在之前3月17号和4月9号的文章中,我们讲过innodb的数据页结构,如果对下面的内容有什么不理解的话,还请在文章分类中翻看之前的文章,防止大家忘记,这里...

    AsiaYe
  • 基于Python装饰器的向量化计算速度对比

    timer是一个装饰器,功能是给被装饰的函数计时。如果要进一步了解装饰器的使用,点击此链接Python闭包函数和装饰器 sumOfLoop函数是常规的使用fo...

    潇洒坤
  • 【趣学程序】java中的方法

    趣学程序-shaofeer
  • 《人民日报》采访姚期智:求解人工智能的中国答案

    他是“图灵奖”创立以来首位获奖的亚裔学者,也是迄今为止获此殊荣的唯一华裔计算机科学家。2004年从普林斯顿辞去终身教职回到清华任教。2005年,他为清华本科生创...

    大数据文摘

扫码关注云+社区

领取腾讯云代金券