(1)函数防抖debounce

函数触发停止一段时间后(期间不能再触发 debounce,否则将重新计时),再执行回调函数

机制:

防抖函数主要利用定时器的延迟执行特性,根据是否有定时器在等待执行:

  • 触发了一个事件后:如果有一个定时任务待执行,就清除定时器,重新计时。
  • 如果没有任务待执行,就定时执行这个事件。

#应用场景:

  1. 表单的连续点击,防止重复提交。比如重复发送一篇文章。
  2. 类百度的搜索,连续输入等输入停止后再搜索。
  3. 一直拖动浏览器窗口,只想触发一次事件等。

(2)函数节流throttle

规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行(单位时间内有事件被多次触发则,只生效一次)。
节流函数根据时间差是否超过给定时间(gapTime)来决定是否触发回调。

应用场景:

  1. 自动保存草稿功能,当用户在输入的时候(一直触发事件),单位时间内只保存一次草稿。
  2. 游戏中的刷新率

(3)对比

作用和本质:

  • 防抖函数和节流函数主要解决的问题是:防止函数”短时间“的重复执行。

  • 它们本质上是:在时间轴上控制函数的执行次数。

#应用实例,需要加个括号:

因为返回debouncethrottle返回的是一个函数,所以如果不是自动执行的事件监听回调,我们应该再后面加个(),执行返回的闭包函数。

.

函数防抖VS函数节流的更多相关文章

  1. JS函数防抖与函数节流

    概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于等于执 ...

  2. 微信小程序之使用函数防抖与函数节流

    函数防抖和函数节流都是老生常谈的问题了.这两种方式都能优化 js 的性能.有些人可能会搞混两个的概念.所以,我以自己的理解,来解释这两个概念的含义.并且列举在小程序中这两个方法的使用. 函数防抖: 英 ...

  3. js中实现函数防抖跟函数节流

    最近刚接触两个新概念函数防抖与函数节流,虽然这些内容网上可以搜到很多,大家都有自己的一套的理解方式,都写得很好, 而自己则想在理解的基础上自己把代码实现一遍,加深印象. 一.函数防抖 假如我们有这样的 ...

  4. js函数防抖和函数节流

    参考链接:https://juejin.im/post/5b651dc15188251aa30c8669 参考链接:https://www.jb51.net/article/158818.htm 在我 ...

  5. Vue函数防抖和函数节流

    函数防抖(debounce) 应用场景 登录.发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防 ...

  6. 前端常见原生方法的实现(bind,promise,new,extends,深拷贝,函数防抖,函数节流)

    前端原生方法的实现,这里写一下常见的一些实现: 1.bind Function.prototype.bind2 = function (context) { var self = this; retu ...

  7. 函数防抖与函数节流 封装好的debounce和throttle函数

    /** * 空闲控制 返回函数连续调用时,空闲时间必须大于或等于 wait,func 才会执行 * * @param {function} func 传入函数,最后一个参数是额外增加的this对象,. ...

  8. 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖

    前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...

  9. JavaScript函数节流和函数防抖之间的区别

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

随机推荐

  1. SpringBoot系列之集成Mybatis教程

    SpringBoot系列之集成Mybatis教程 环境准备:IDEA + maven 本博客通过例子的方式,介绍Springboot集成Mybatis的两种方法,一种是通过注解实现,一种是通过xml的 ...

  2. Python爬虫实现抓取腾讯视频所有电影【实战必学】

    2019-06-27 23:51:51 阅读数 407  收藏 更多 分类专栏: python爬虫   前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问 ...

  3. 新更新的OV7670 OV7725模块效果展示 OV7670 FPC版 30万像素 CMOS模块 兼容官哥方便 FPGA stm32f407 68013等使用

    原创OV7670,30W像素摄像头模块, 3) 光学尺寸1/6 ,像素面积3.6 μm x 3.6 μm,灵敏度1.3V/Lux-sec 4) 工作电压:3.3V 5) 接口定义为10*2的2.54间 ...

  4. Vue中实现聊天窗口overflow:auto自动滚动到底部,实现显示当前最新聊天消息

    在做消息的项目,当有新消息的时候让新消息出现在最底部,此时的box用的是overflow:auto 注意:vue项目需要注意在dom结构渲染完再进行操作 <div class="mai ...

  5. Eclipse Properties编辑

    1.使用Eclipse插件编辑,这是本人推荐的方式 UPDATE地址:http://propedit.sourceforge.jp/eclipse/updates 2.使用JDK自带的工具native ...

  6. 数组(Array)和列表(ArrayList)有什么区别?什么时候应该使用Array而不是ArrayList?

    下面列出了Array和ArrayList的不同点:Array可以包含基本类型和对象类型,ArrayList只能包含对象类型.Array大小是固定的,ArrayList的大小是动态变化的.ArrayLi ...

  7. poj 1321 棋盘问题 (回溯法)

    棋盘问题 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 69951   Accepted: 33143 Descriptio ...

  8. [ASP.NET Core 3框架揭秘] 配置[6]:多样化的配置源[上篇]

    .NET Core采用的这个全新的配置模型的一个主要的特点就是对多种不同配置源的支持.我们可以将内存变量.命令行参数.环境变量和物理文件作为原始配置数据的来源.如果采用物理文件作为配置源,我们可以选择 ...

  9. Python代码编写规范,你真的会吗?

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:yangjiajia123456  最近两年的工作都是和运维相关,有时 ...

  10. 小程序填坑——bindconfirm事件

    一.介绍 当你要在手机软键盘中触发一些方法,就可以使用input标签的bindconfirm事件.这个事件的作用是当你在软键盘上点击确认的时候,将触发你指定的方法. 还可以使用confirm-type ...