美文网首页
JavaScript防抖和节流

JavaScript防抖和节流

作者: agamgn | 来源:发表于2020-01-13 08:15 被阅读0次

前言

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

debounce(防抖)

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

demo1.png
代码运行效果: demo.gif
结合上面的代码,我们可以了解到,在触发点击事件后,如果用户再次点击了,我们会清空之前的定时器,重新生成一个定时器。意思就是:这件事儿需要等待,如果你反复催促,我就重新计时!
使用场景:
  • search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
  • window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次

throttle(节流)

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

demo2.png
代码运行效果: demo1.gif
使用场景:
  • 鼠标不断点击触发,mousedown(单位时间内只触发一次)
  • 监听滚动事件,比如是否滑到底部自动加载更多,懒加载,用throttle来判断

参考

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

代码地址

相关文章

  • Javascript 基础

    1、函数防抖和函数节流 【《javascript高级程序设计》里,函数节流是这里讲的函数防抖。】函数防抖: 在事件...

  • 彻底弄懂函数防抖和函数节流

    函数防抖和节流 函数防抖和函数节流:是优化高频率执行的JavaScript代码的一种手段。常用于JavaScrip...

  • 函数防抖和函数节流

    函数防抖和函数节流 函数防抖和函数节流:是优化高频率执行的JavaScript代码的一种手段。常用于JavaScr...

  • JavaScript防抖和节流

    无论是防抖还是节流都是为了避免回调函数中的处理随着连续触发事件每次都执行 防抖和节流都是为了防止函数(事件)的连续...

  • 防抖和节流 javascript

    防抖(Debounce)指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执...

  • JavaScript防抖和节流

    前言 debounce(防抖)和throttle(节流)是两个相似的技术,都是为了减少一个函数无用的触发次数,以便...

  • JavaScript 节流和防抖

    什么是节流和防抖 节流和防抖的本质都是用闭包的形式,通过对事件对应的回调函数进行包裹,用自由变量缓存时间信息,最后...

  • JavaScript防抖和节流

    防抖和节流 相同:在不影响客户体验的前提下,将频繁的回调函数,进行次数缩减.避免大量计算导致的页面卡顿.不同:防抖...

  • JavaScript - 防抖和节流

    lodash工具库里有实现防抖和节流的函数 防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,...

  • JavaScript防抖和节流

    1. 认识防抖和节流 1.1. 对防抖和节流的认识 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电...

网友评论

      本文标题:JavaScript防抖和节流

      本文链接:https://www.haomeiwen.com/subject/gcgboctx.html