首页 文章 精选 留言 我的

精选列表

搜索[javascript库],共10000篇文章
优秀的个人博客,低调大师

戏说前端 JavaScript 之『防抖节流』基础知识

往事不堪回首 犹记在很久之前的某次面试中,和那技术大哥谈的正欢呢,冷不防他来了句:谈一谈防抖和节流吧。 抹了把凉汗,我用颤抖的、不自信的语气回答道:呃,防抖就是应该是防止抖动的意思,节流大概是节省流量吧…… 当时,我的心理活动是这样的: 当年心理素质是真的差,这个坎没翻过去,最后的结果就是: 知耻而后勇 以我不服输的性格,这场子必须找回来! 经过这几年的勤学苦练,我现在自信简直爆棚,如果,时光能够倒流,我相信我可以做到这样: 今天,我要跟「防抖节流」来做个了断,以证明现在的我已不是过去的我,用一个成语来形容,那就是——今非昔比! 知己知彼,方能百战百胜 古老的法则告诉我们:欲要消灭敌人,必须先要了解敌人。 防抖(debounce) 从字面意思来看,防抖就是防止抖动的意思。 举个例子:比如说你对象要你帮她拍美照, 结果因为你加班太多身体虚,手抖的厉害,拍出来的照片模糊不清,为免受雷霆之怒,你就需要想想办法。首先,分析一下照片模糊的原因: 手抖的厉害(1s 十几次!!??) 导致相机不能完美的捕捉画面 所以照片模糊。 看来,「手抖」才是罪魁祸首啊,那想个办法解决手抖的问题就好了:找一个支架,让它代替手来支撑相机,这样就不「抖」了! 这操作,让我不得不对你竖起大拇指: 想想看上面这个例子本质上是解决了什么问题? 我觉得应该是解决了**「抖动频率」**的问题——手拿着,一秒会抖好多次;可支架撑着,好长时间都未必会抖一次。可谓是「人不如架」啊! 支架起的就是防抖的作用。 回到我们今天的正题上,来看一下防抖的常规解释:当函数被连续调用时,该函数并不执行,只有当其全部停止调用超过一定时间后才执行1次。 节流(throttle) 现在回头看看我当年的回答,还是摸到了一点门槛(手动缓解尴尬,嘿嘿)。 再来个例子:家里的水龙头,即使你开的再大,它在单位时间里能流出的水就那么多,因为水龙头的规格限制了它单位时间里的流量。 水龙头起到的就是节流的作用。 节流的常规解释:规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。 常用场景 防抖节流一般用于以下场景: 浏览器窗口的缩放,页面的滑动触发的 resize ,scroll 鼠标事件 onmousemove ,onmousedown, onmouseup 输入框录入触发的 keyup ,keydown…… 原理 防抖是维护一个计时器,规定在 delay 时间后触发函数,但是在 delay 时间内再次触发的话,都会清除当前的 timer 然后重新设置超时调用,即重新计时。这样一来,只有最后一次操作能被触发。 节流是通过判断是否到达一定时间来触发函数,若没到规定时间则使用计时器延后,而下一次事件则会重新设定计时器。 区别 函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行,不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。 总结 今天就先来了解一下「防抖」和「节流」的基础知识,详细代码实现待后续。 ~ ~ ~ 未完待续 学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂! 大家好!我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教! 知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长,特征是大鼻子、头戴帽子、身穿背带裤,还留着胡子。与他的双胞胎兄弟路易基一起,长年担任任天堂的招牌角色。

腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题,腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构,目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux

Rocky Linux(中文名:洛基)是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版,作为CentOS稳定版停止维护后与RHEL(Red Hat Enterprise Linux)完全兼容的开源替代方案,由社区拥有并管理,支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性,采用模块化包装和SELinux安全架构,默认包含GNOME桌面环境及XFS文件系统,支持十年生命周期更新。

Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

用户登录
用户注册