防抖与节流
当事件上绑定了事件处理程序,当这个事件被持续触发时,一直会执行这个事件处理程序,比如onscroll、onresize,而这是没有必要的,甚至会影响性能,影响用户体验。因此,需要在绑定事件的时候做一些操作,使之执行事件处理程序不要那么频繁。主要有两种思路。
一、函数防抖
当持续触发事件后,一段时间后没有再触发这个事件,执行事件处理程序。如果在设定时间到来之前,再次触发了这个事件,则重新开始计时
var timer = null; document.body.onscroll = function(){ clearTimeout(timer); // 清除未执行的代码,重置回初始化状态 timer = setTimeout(function(){ console.log("函数防抖"); }, 300); };
二、函数节流
var canRun = true; document.body.onscroll = function(){ if(!canRun){ // 判断是否已空闲,如果在执行中,则直接return return; } canRun = false; setTimeout(function(){ console.log("函数节流"); canRun = true; }, 300); };
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用