函数防抖 和 函数节流
函数防抖 和 函数节流
函数防抖(debounce)
概念
函数防抖 就是指 触发事件后 在 n 秒内 函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
简单的说,当一个动作连续触发,则只执行最后一次。
生活中的实例: 如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时)。
坐公交,司机需要等最后一个人进入才能关门。每次进入一个人,司机就会多等待几秒再关门
将一个弹簧按下,继续加压,继续按下,只会在最后放手的一瞬反弹。即我们希望函数只会调用一次,即使在这之前反复调用它,最终也只会调用一次而已。
函数防抖 应用场景
- 给按钮加函数防抖防止表单多次提交。
- 对于输入框连续输入进行AJAX验证时,用函数防抖能有效减少请求次数。
- 判断scroll是否滑到底部,滚动事件+函数防抖
- 手机号、邮箱验证输入检测
- 窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染
总的来说,适合多次事件一次响应的情况,也就是连续的事件,只需触发一次回调。
函数节流(throttle)
概念
限制一个函数在一定时间内只能执行一次。
也就是 规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。
实例:
一个水龙头在滴水,可能一次性会滴很多滴,但是我们只希望它每隔 500ms 滴一滴水,保持这个频率。即我们希望函数在以一个可以接受的频率重复调用。
我们分析上图你会发现:
竖线的疏密代表事件执行的频繁程度。可以看到,正常情况下,竖线非常密集,函数执行的很频繁。而debounce(函数防抖)则很稀疏,只有当鼠标停止移动时才会执行一次。throttle(函数节流)分布的较为均已,每过一段时间就会执行一次。
函数节流 应用场景
间隔一段时间执行一次回调的场景有:
- 滚动加载,加载更多或滚到底部监听
- 谷歌搜索框,搜索联想功能
- 高频点击提交,表单重复提交
- 游戏中的刷新率
- DOM元素拖拽
- Canvas画笔功能
总的来说,适合大量事件按时间做平均分配触发
函数防抖 和 函数节流相关推荐
- 函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用
函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用 文章目录 函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用 1. 为什么要防抖节流 1.1 ...
- js中的函数防抖和函数节流
1.什么是函数防抖和函数节流 防抖(debounce)和节流(throttle)都是用来控制某个函数在一定时间内执行多少次的技巧,两者相似不相同,基本思想都是某些代码不可以在没有间断的情况下连续重复执 ...
- 函数防抖和函数节流的最简单解释
函数防抖:连续触发的事件,只会触发最后一次.每次触发的时候都会清除上一次待触发的. const debounce = (func, wait) => {let timer;return (par ...
- 函数防抖(debounce)和节流(throttle)以及lodash的debounce源码赏析
函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听.比如scroll resize等事件,这些事件在某些场景触发非常频繁. 比如,实现一个原生的拖拽功能(不能用 H5 Drag& ...
- 函数防抖debounce和节流throttle
debounce 函数防抖 1.什么是函数防抖 函数防抖是优化高频率执行 js 代码的一种手段 可以让被调用的函数在一次连续的高频率操作过程中只被调用一次 2.函数防抖的作用 减少代码执行次数,提升网 ...
- 微信小程序 函数防抖和函数节流
函数防抖:延迟函数执行,多用于input框输入时,显示匹配的输入内容的情况 函数节流:单位时间n秒内,第一次触发函数执行 之后不管触发多少次都不执行.到下一个单位时间n秒时 第一次触发函数执行,多用于 ...
- 函数防抖和函数节流原理理解
防抖和节流有什么用,一般的使用场景,原理是什么 1.作用 使用函数节流与函数防抖的目的,就是为了节约计算机资源,提升用户体验. 2.场景 节流一般是用在必须执行这个动作,但是不能够执行太频繁的情况下, ...
- 函数防抖Debounce和函数节流Throttle
函数节流 & 函数防抖 函数节流和函数防抖 函数节流和函数防抖二者很容易被混淆起来.下面贴英文原文,建议认真阅读: Debouncing enforces that a function no ...
- JavaScript函数节流和函数防抖
1.为什么需要函数防抖和函数节流? 在浏览器中某些计算和处理要比其他的昂贵很多.例如DOM操作比起非DOM交互需要更多的内存和CPU占用时间.连续尝试进行过多的DOM操作可能会导致浏览器挂起,甚至崩溃 ...
最新文章
- WINRAR 命令行语法
- 二分查找与二叉排序树
- Python入门100题 | 第015题
- golang之iota
- Angular SPA基于Ocelot API网关与IdentityServer4的身份认证与授权(三)
- oracle sysnonym,Oracle权限
- Cocos2d-x3.1FileUtilsTest使用
- 显卡刷bios改型号_显卡BIOS刷新方法(详细)
- 软考软件设计师-软件工程基础知识
- Java代理模式及其应用
- pdf格式如何压缩文件大小?
- 最优化进退法c语言编程,进退法、0.618法、Powell法、罚函数法的程序设计,急!!...
- 电脑怎样设置定时关机
- 中国重型包装行业竞争趋势与发展规模分析报告2022-2028年版
- 支付宝支付流程 及简单实现
- 解决“手机锂电池无输出电压,无法充电”
- 写一手好SQL很有必要
- 170 套各种公司网站模板软件公司网站模板企业网站模板创意设计公司网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应
- 美团酒店:如何收割新一代90后住宿需求? | 一点财经
- 性能测试流程-性能测试2