美文网首页
JS的节流、防抖及使用场景

JS的节流、防抖及使用场景

作者: 懒懒猫 | 来源:发表于2022-09-01 13:56 被阅读0次

防抖

在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

节流

规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

总结

  1. 函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间的原理却不一样。
  2. 函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。

使用场景

节流
  • 用户在搜索的时候,在不停的输入,如果每敲一个字我们就要调一次接口去查询,接口调用太频繁,会占内存给卡住。
  • 手机号、邮箱验证输入检测
防抖
  • 窗口大小resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
  • 页面滚动处理事件
  • 鼠标不断点击触发,mousedown(单位时间内只触发一次)
  • 监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断

相关文章

网友评论

      本文标题:JS的节流、防抖及使用场景

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