(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. 如何打造个人km知识管理系统

    经常有朋友会遇到这样一种情况,在网络中看到一篇很好的文章,但后来因为关键字想不起来,结果怎么都搜索不到.还有些朋友虽然平时也会做一些记录,把有用的资料进行保存,但他们往往将保存的资料分散在不同的地方, ...

  2. mui 顶部选项卡的两种切换方式

    mui 顶部选项卡的两种切换方式 第一种main页面 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  3. 【Python必学】Python爬虫反爬策略你肯定不会吧?

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 正文 Python爬虫反爬策略三部曲,拥有这三步曲就可以在爬虫界立足了: ...

  4. python输出日志到文件(每天一个日志)

    import logging from logging.handlers import TimedRotatingFileHandler logger = logging.getLogger('sim ...

  5. matlab安装出现“无法访问所在网络位置”的正确解决办法

    今天安装matlab时出现了如下错误:无法访问您试图使用的功能所在的网络位置,单击"确认"重试或者在下面输入包含"vcredist.msc"的文件夹路径. (由 ...

  6. 聊聊技术选型 - Angular2 vs Vue2

    作者介绍:李旸,美团点评前端工程师,3 年 Web 前端开发经验,现在是美团点评点餐团队的一员. "Come, and take choice of all my library, And ...

  7. BIOS安全设置

    1.开机按F2进入BIOS 2.进入 Security 界面 3.Set user password 用户密码 开机密码 设置为123456 4.Set supervisor password 进BI ...

  8. 【CentOS7】curl命令

    [CentOS7]curl命令 转载: 参考 https://www.thegeekstuff.com/2012/04/curl-examples/ http://www.cnblogs.com/gb ...

  9. Python爬虫基础——re模块的提取和匹配

    re是Python的一个第三方库. 为了能更直观的看出re的效果,我们先新建一个HTML网页文件(可直接复制): index.html <!DOCTYPE html> <html l ...

  10. 发布一个基于协程和事件循环的c++网络库

    目录 介绍 使用 性能 实现 日志库 协程 协程调度 定时器 Hook RPC实现 项目地址:https://github.com/gatsbyd/melon 介绍 开发服务端程序的一个基本任务是处理 ...