美文网首页
聊一聊防抖和节流

聊一聊防抖和节流

作者: 邹小小白 | 来源:发表于2021-07-12 09:13 被阅读0次

首页我们来梳理一下概念的东西

1、什么是防抖
防抖(debounce):触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间

节流(thorttle):高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率

分别举例:
防抖:1、就好像在百度搜索时,每次输入之后都有关联的词弹出,这个控制关联词的方法就不可能是输入框内容一改变就触发的,他一定是当你结束输入一段时间之后才会触发,这时可以使用函数防抖。

2、滚动scroll事件,不停滑动滚轮会连续触发多次滚动事件,从而调用绑定的回调函数,我们希望当我们停止滚动的时,才触发一次回调,这时可以使用函数防抖。

节流:1、预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时,你不断点刷新点购买,可是总有一段时间你点上是没有效果,这里就用到了节流,就是怕点的太快导致系统出现bug。

2、在项目中碰到的问题,移动端通过scroll实现分页,不断滚动,我们不希望不断发送请求,只有当达到某个条件,比如,距离手机窗口底部150px才发送一个请求,接下来就是展示新页面的请求,不停滚动,如此反复、这个时候就得用到函数节流。

2、那么他们的区别是什么呢
防抖是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。

相关文章

  • 聊一聊防抖和节流

    首页我们来梳理一下概念的东西 1、什么是防抖防抖(debounce):触发高频事件后 n 秒内函数只会执行一次,如...

  • 谈谈js中的节流和防抖函数

    关于节流和防抖,这篇文章说的很好了,深入lodash源码分析防抖和节流深入篇 | Lodash 防抖和节流是怎么实...

  • JavaScript防抖和节流

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

  • JavaScript之函数防抖、节流

    一、前言 相信无论在实际应用场景、亦或是面试,都会经常遇得到函数防抖、函数节流等,下面我们来聊一聊吧。 先放出一个...

  • js的防抖和节流

    js的 防抖(debounce)和 节流(throttle ) 防抖和节流一般用于高频触发事件,属于浏览器性能优化...

  • 前端性能优化-浅谈js防抖和节流

    浅谈js防抖和节流

  • Javascript 基础

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

  • 实现防抖和节流

    一、认识防抖和节流函数 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流动...

  • js 防抖 节流

    节流 防抖1 防抖2

  • 2019-03-27

    js的防抖和节流 据我所知防抖和节流都是为了优化作用,减轻浏览器和服务端的负担,防抖和节流俩个的英文要记住: de...

网友评论

      本文标题:聊一聊防抖和节流

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