最近在做一个分页滚动的基本功能,第一次做的时候加了一个延时器,这次做的时候加了延时器,数据处理的有点不对,然后就和我同事争论了起来,因为他资质比我深一点,就觉得他的理论就一定是对的,后来搞得大家心里都不是很愉快,再后来我们深入讨论到节流和防抖的问题,显然他把两者混淆了,把防抖说成了节流,写这篇博客也是希望自己记住这两个概念,下次遇到同样的场景,也有理有据了。【流汗脸!】
函数防抖
概念
频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码,举个例子,0-100s内,每2s执行一次,100s之后停止,高频次的请求接口,原理
1、函数防抖的要点,也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
2、 如果方法多次触发,则把上次记录的延迟执行代码用clearTimeout清掉,重新开始。
3、 如果计时完毕,没有方法进来访问触发,则执行代码。- 使用场景
分页下拉滚动实时循环请求接口、input框实现实时联想字段接口、用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后,前端才需要检查格式是否正确,如果不正确,再弹出提示语 - 例子
// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
clearTimeout(timer); // 清除未执行的代码,重置回初始化状态
timer = setTimeout(function(){
console.log("函数防抖");
}, 300);
};
// 函数防抖的要点,也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
// 如果方法多次触发,则把上次记录的延迟执行代码用clearTimeout清掉,重新开始。
// 如果计时完毕,没有方法进来访问触发,则执行代码。
函数节流
- 概念
频繁触发,但只在特定的时间内才执行一次代码;举个例子,0-100s内,不管频率是多少,100s以内一次性执行完毕 - 原理
1、 函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行。
2、 如果空闲,则可以正常触发方法执行。
3、如果代码正在执行,则取消这次方法执行,直接return。 - 使用场景
多数在监听页面元素滚动事件的时候会用到。因为滚动事件,是一个高频触发的事件 - 例子
// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
// 判断是否已空闲,如果在执行中,则直接return
return;
}
canRun = false;
setTimeout(function(){
console.log("函数节流");
canRun = true;
}, 300);
};
// 函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行。
// 如果空闲,则可以正常触发方法执行。
// 如果代码正在执行,则取消这次方法执行,直接return。