函数防抖VS函数节流
(1)函数防抖debounce
函数触发停止一段时间后(期间不能再触发 debounce,否则将重新计时),再执行回调函数
机制:
防抖函数主要利用定时器的延迟执行特性,根据是否有定时器在等待执行:
- 触发了一个事件后:如果有一个定时任务待执行,就清除定时器,重新计时。
- 如果没有任务待执行,就定时执行这个事件。
#应用场景:
- 表单的连续点击,防止重复提交。比如重复发送一篇文章。
- 类百度的搜索,连续输入等输入停止后再搜索。
- 一直拖动浏览器窗口,只想触发一次事件等。
(2)函数节流throttle
规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行(单位时间内有事件被多次触发则,只生效一次)。
节流函数根据时间差是否超过给定时间(gapTime)来决定是否触发回调。
应用场景:
- 自动保存草稿功能,当用户在输入的时候(一直触发事件),单位时间内只保存一次草稿。
- 游戏中的刷新率
(3)对比
作用和本质:
防抖函数和节流函数主要解决的问题是:防止函数”短时间“的重复执行。
它们本质上是:在时间轴上控制函数的执行次数。
#应用实例,需要加个括号:
因为返回debounce和throttle返回的是一个函数,所以如果不是自动执行的事件监听回调,我们应该再后面加个(),执行返回的闭包函数。
.
函数防抖VS函数节流的更多相关文章
- JS函数防抖与函数节流
概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于等于执 ...
- 微信小程序之使用函数防抖与函数节流
函数防抖和函数节流都是老生常谈的问题了.这两种方式都能优化 js 的性能.有些人可能会搞混两个的概念.所以,我以自己的理解,来解释这两个概念的含义.并且列举在小程序中这两个方法的使用. 函数防抖: 英 ...
- js中实现函数防抖跟函数节流
最近刚接触两个新概念函数防抖与函数节流,虽然这些内容网上可以搜到很多,大家都有自己的一套的理解方式,都写得很好, 而自己则想在理解的基础上自己把代码实现一遍,加深印象. 一.函数防抖 假如我们有这样的 ...
- js函数防抖和函数节流
参考链接:https://juejin.im/post/5b651dc15188251aa30c8669 参考链接:https://www.jb51.net/article/158818.htm 在我 ...
- Vue函数防抖和函数节流
函数防抖(debounce) 应用场景 登录.发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防 ...
- 前端常见原生方法的实现(bind,promise,new,extends,深拷贝,函数防抖,函数节流)
前端原生方法的实现,这里写一下常见的一些实现: 1.bind Function.prototype.bind2 = function (context) { var self = this; retu ...
- 函数防抖与函数节流 封装好的debounce和throttle函数
/** * 空闲控制 返回函数连续调用时,空闲时间必须大于或等于 wait,func 才会执行 * * @param {function} func 传入函数,最后一个参数是额外增加的this对象,. ...
- 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖
前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...
- JavaScript函数节流和函数防抖之间的区别
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
随机推荐
- 数理统计(一)——用Python进行方差分析
数理统计(一)——Python进行方差分析 iwehdio的博客园:https://www.cnblogs.com/iwehdio/ 方差分析可以用来推断一个或多个因素在其状态变化时,其因素水平或交互 ...
- seaborn 数据可视化(二)带有类别属性的数据可视化
Seaborn的分类图分为三类,将分类变量每个级别的每个观察结果显示出来,显示每个观察分布的抽象表示,以及应用统计估计显示的权重趋势和置信区间: 第一个包括函数swarmplot()和stripplo ...
- Python基础语法总结【新手必学】
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:weixin_45189038直接上知识点: 1. 注释 单行注释: ...
- Python3 并发编程1
目录 操作系统发展 穿孔卡片 批处理 多道技术(单核) 并发与并行 进程 程序与进程 进程调度 进程的三个状态 同步和异步 阻塞与非阻塞 僵尸进程与孤儿进程 守护进程 Python中的进程操作 Pro ...
- springboot整合axis1.4搭建服务端
前言 最近公司要开发个接口,要用webservices接口实现,而且使用的是axis1.4框架,webservices和axis这两个东西我之前都没接触过,而且axis1.4这个框架06年就不再维护了 ...
- Django基础day01
后端(******) 软件开发结构c/s http协议的由来 sql语句的由来 统一接口统一规范 HTTP协议 1.四大特性 1.基于TCP/IP作用于应用层之上的协议 2.基于请求响应 3.无状态 ...
- 《Java知识应用》Java读写DBF文件
1. 准备: Jar包下载:链接: https://pan.baidu.com/s/1Ikxx-vkw5vSDf9SBUQHBCw 提取码: 7h58 复制这段内容后打开百度网盘手机App,操作更方便 ...
- 【原】MAC安装Flutter
系统环境要求 Flutter因为是新出的框架,所以对系统还是有一定的要求的. MacOS(64-bit) 磁盘空间:大于700M,如果算上Android Studio等编辑工具,尽量大于3G. 命令号 ...
- js中数组去重方法及性能对比
js中数组的 数组去重 常用的数组去重方法以及效率分析: 首先我们先构建一个数组,主要是用于进行去重实验,我们主要实验的量级为1000,10000,100000,500000.具体的生成数组的方法如下 ...
- (2018版)webstorm的安装和破解
前言 相信使用HBuildX的各位都用过,所以这个webstorm就是用来代替的. 因为使用方式跟idea等软件差不多,如果习惯了idea的操作方式的可以试一试 安装webstorm 这是2018版的 ...