JS函数节流和函数防抖问题分析
问题1:如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办?
**问题2:**如果给一个按钮绑定了表单提交的post事件,但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交,如何防止多次提交的发生?
为了应对如上场景,便出现了 函数防抖 和 函数节流 两个概念,总的来说:
这两个方法是在 时间轴上控制函数的执行次数。
函数防抖(debounce)
概念: 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
生活中的实例: 如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时)。
函数节流(throttle)
概念: 规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。
生活中的实例: 我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时,在人眼的视觉中就会形成一个连贯的动画,所以在电影的播放(以前是,现在不知道)中基本是以每秒 24 张的速度播放的,为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候,100 张就会显得很浪费资源。
分析图
假设,我们观察的总时间为10秒钟,规定1秒作为一次事件的最小间隔时间。
如果触发事件的频率是 0.5s/次 ,那么函数防抖如图
因为始终没法等一秒钟就被再次触发了,所以最终没有一次事件是成功的。
函数节流如图
因为控制了最多一秒一次,频率为 0.5s/次 ,所以每一秒钟就有一次事件作废。最终控制成 1s/次
如果触发事件的频率是 2s/次 ,那么
函数防抖如图
因为 2s/次
已经大于了规定的最小时间,所以每计时两秒便触发一次。
函数节流如图
同样, 2s/次 大于了最小时间规定,所以每一次触发都生效。
应用场景
对于函数防抖,有以下几种应用场景:
- 给按钮加函数防抖防止表单多次提交。
- 对于输入框连续输入进行AJAX验证时,用函数防抖能有效减少请求次数。
- 判断 scroll 是否滑到底部, 滚动事件 + 函数防抖
总的来说,适合多次事件 一次响应 的情况
对于函数节流,有如下几个场景:
- 游戏中的刷新率
- DOM元素拖拽
- Canvas画笔功能
总的来说,适合 大量事件 按时间做 平均 分配触发。
源码
函数防抖:
function debounce(fn, wait) { var timer = null; return function () { var context = this var args = arguments if (timer) { clearTimeout(timer); timer = null; } timer = setTimeout(function () { fn.apply(context, args) }, wait) } } var fn = function () { console.log('boom') } setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发,之后每1000ms触发一次 setInterval(debounce(fn,2000),1000) // 不会触发一次(我把函数防抖看出技能读条,如果读条没完成就用技能,便会失败而且重新读条)
之所以返回一个函数,因为防抖本身更像是一个函数修饰,所以就做了一次函数柯里化。里面也用到了闭包,闭包的变量是 timer 。
函数节流
function throttle(fn, gapTime) { let _lastTime = null; return function () { let _nowTime = + new Date() if (_nowTime - _lastTime > gapTime || !_lastTime) { fn(); _lastTime = _nowTime } } } let fn = ()=>{ console.log('boom') } setInterval(throttle(fn,1000),10)
如图是实现的一个简单的函数节流,结果是 一秒打出一次boom
总结
以上所述是小编给大家介绍的JS函数节流和函数防抖问题分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Go语言指针访问结构体的方法
- Spring Boot & Spring Cloud 应用内存管理
- hdu----(1849)Rabbit and Grass(简单的尼姆博弈)
- 10分钟让你明白MySQL是如何利用索引的
- 扩展Yarn资源模型详解1
- hdu-------(1848)Fibonacci again and again(sg函数版的尼姆博弈)
- go语言实现将重要数据写入图片中
- poj-----(2528)Mayor's posters(线段树区间更新及区间统计+离散化)
- poj---(2886)Who Gets the Most Candies?(线段树+数论)
- Hadoop3.0通用版集群安装高可靠详细教程
- Hadoop3.0集群安装知识
- 分布式消息队列 RocketMQ 源码分析 —— Message 顺序发送与消费
- 深入解析快速排序算法的原理及其Go语言版实现
- Hadoop3.0: YARN Resource配置说明
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 容器中的隔离与限制:namespace和cgroups
- 行为型设计模式:策略模式
- redis实战第十二篇 redis cluster请求重定向
- 行为型设计模式:责任链模式以及mybatis中的责任链
- java中BigDecimal使用和注意事项
- redis实战第十一篇 redis cluster添加密码
- Linux下docker制作springboot应用镜像
- 行为型设计模式:备忘录模式
- 行为型设计模式:访问者模式
- redis实战第十篇 集群收缩
- redis实战第九篇 集群扩容自动迁移槽(redis-cli)
- 自动化运维| Ansible playbook的逻辑控制语句
- Windows通用应用平台UWP持久化
- redis实战第八篇 集群扩容 手动迁移槽
- Xinetd服务的安装与配置详解