JavaScript防抖和节流

前言

debounce(防抖)和throttle(节流)是两个相似的技术,都是为了减少一个函数无用的触发次数,以便提高性能或者说避免资源浪费。

debounce(防抖)

概念:任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行,否则则重新计时。

demo1.png

代码运行效果:
demo.gif

结合上面的代码,我们可以了解到,在触发点击事件后,如果用户再次点击了,我们会清空之前的定时器,重新生成一个定时器。意思就是:这件事儿需要等待,如果你反复催促,我就重新计时!
使用场景:

  • search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
  • window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次

throttle(节流)

概念:指定时间间隔内只会执行一次任务。

demo2.png

代码运行效果:
demo1.gif

使用场景:

  • 鼠标不断点击触发,mousedown(单位时间内只触发一次)
  • 监听滚动事件,比如是否滑到底部自动加载更多,懒加载,用throttle来判断

参考

防抖和节流的应用场景和实现

代码地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 防抖和节流 相同:在不影响客户体验的前提下,将频繁的回调函数,进行次数缩减.避免大量计算导致的页面卡顿.不同:防抖...
    CodeMT阅读 2,844评论 0 2
  • 无论是防抖还是节流都是为了避免回调函数中的处理随着连续触发事件每次都执行 防抖和节流都是为了防止函数(事件)的连续...
    peakol阅读 3,308评论 0 0
  • 前言 最近和前端的小伙伴们,在讨论面试题的时候。谈到了函数防抖和函数节流的应用场景和原理。于是,想深入研究一下两者...
    youthcity阅读 23,723评论 5 78
  • 手写防抖函数 debounce 和节流函数 throttle 本文参考:深入浅出节流函数 throttle深入浅出...
    请叫我大苏阅读 11,955评论 1 4
  • 摘要:JavaScript 中的函数防抖和节流是很常用的需求,前端面试也是频率比较高被问到的知识,本文就通过二者的...
    EnochQin阅读 5,005评论 0 5

友情链接更多精彩内容