js函数节流和函数防抖
概念解释
函数节流: 频繁触发,但只在特定的时间内才执行一次代码
函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码
函数节流
函数节流应用的实际场景,多数在监听页面元素滚动事件的时候会用到。因为滚动事件,是一个高频触发的事件。
以下是监听页面元素滚动的示例代码:
1 // 函数节流 2 var canRun = true; 3 document.getElementById("throttle").onscroll = function(){ 4 if(!canRun){ 5 // 判断是否已空闲,如果在执行中,则直接return 6 return; 7 } 8 9 canRun = false; 10 setTimeout(function(){ 11 console.log("函数节流"); 12 canRun = true; 13 }, 300); 14 }; 15 // 函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行。 16 // 如果空闲,则可以正常触发方法执行。 17 // 如果代码正在执行,则取消这次方法执行,直接return。
函数抖动
函数防抖的应用场景,最常见的就是用户注册时候的手机号码验证和邮箱验证了。
只有等用户输入完毕后,前端才需要检查格式是否正确,如果不正确,再弹出提示语。
以下还是以页面元素滚动监听的例子,来进行解析:
1 // 函数防抖 2 var timer = false; 3 document.getElementById("debounce").onscroll = function(){ 4 clearTimeout(timer); // 清除未执行的代码,重置回初始化状态 5 6 timer = setTimeout(function(){ 7 console.log("函数防抖"); 8 }, 300); 9 }; 10 // 函数节流的要点,也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。 11 // 如果方法多次触发,则把上次记录的延迟执行代码用clearTimeout清掉,重新开始。 12 // 如果计时完毕,没有方法进来访问触发,则执行代码。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步