函数防抖和函数节流
来源:互联网 发布:js中用parse判断大小 编辑:程序博客网 时间:2024/04/30 08:20
函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛,就是一定时间内眨一次。这是函数节流最形象的解释。
函数防抖是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次。比如生活中的坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷卡了,司机才开车。
函数节流应用的实际场景,多数在监听页面元素滚动事件的时候会用到。因为滚动事件,是一个高频触发的事件。以下是监听页面元素滚动的示例代码:
// 函数节流var canRun = true;document.getElementById("throttle").onscroll = function(){ if(!canRun){ // 判断是否已空闲,如果在执行中,则直接return return; } canRun = false; setTimeout(function(){ console.log("函数节流"); canRun = true; }, 300);};
函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行。
如果空闲,则可以正常触发方法执行。
如果代码正在执行,则取消这次方法执行,直接return
。
三、函数防抖
函数防抖的应用场景,最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后,前端才需要检查格式是否正确,如果不正确,再弹出提示语。以下还是以页面元素滚动监听的例子,来进行解析:
// 函数防抖var timer = false;document.getElementById("debounce").onscroll = function(){ clearTimeout(timer); // 清除未执行的代码,重置回初始化状态 timer = setTimeout(function(){ console.log("函数防抖"); }, 300);};
函数防抖的要点,也是需要一个setTimeout
来辅助实现。延迟执行需要跑的代码。
如果方法多次触发,则把上次记录的延迟执行代码用clearTimeout
清掉,重新开始。
如果计时完毕,没有方法进来访问触发,则执行代码。
阅读全文
0 0
- 函数防抖和节流
- 函数防抖和函数节流
- 函数节流 + 函数防抖
- 函数节流和防抖动
- 函数节流与防抖
- 函数防抖与节流
- 函数的节流 & 防抖
- JS函数节流防抖
- 函数节流与防抖
- 防抖函数和节流函数小列
- js函数防抖与函数节流
- 函数防抖与函数节流
- 函数节流与函数防抖
- [转载]函数节流与函数防抖
- 函数节流与函数防抖
- JavaScript小知识点(二):函数防抖和节流
- 事件委托、函数节流及防抖
- 事件委托、函数节流及防抖
- Android Webview优化及与Js交互
- 二、JDBC——数据库链接和创建
- 一个简单的SpringMVC实例
- html行内元素和块级元素的区别
- 迭代器模式
- 函数防抖和函数节流
- ASP.NET上传文件
- go context专题(二)- context设计目的和基本数据结构
- 乘法表(百度2016实习生真题)-- java
- 逻辑运算符
- Python __slots__ and __dict__
- SQL SERVER数据库升级
- 集合相减A-B
- FCC Spinal Tap Case