防抖和节流
防抖节流的作用
防抖和节流都是用来减少函数执行的频率,已达到项目性能的优化
防抖:
概念:
事件在触发一定时间后再执行回调,如果在这段时间又被触发了,则重新计时,等到计时到了再执行回调
应用场景:
1).输入框远程查询事件(防止边输入边执行后台请求,触发后台请求太多,浪费资源)
2)在线文档自动保存 (防止文档编辑过程中一直触发函数。而停止编辑后再触发性能比较好)
3)浏览器视口大小改变(防止在拖动窗口时一直触发某个方法,浪费资源。而等停止拖动后再触发性能比较好)
代码实现:
// 防抖函数的定义: 内部实际是一个闭包函数,可以通过调用debounce获取到内部的value值
const debounce = (fn, delay) => { let timer = null return function () { clearTimeout(timer) // 每次执行某个操作之前先清空timer timer = setTimeout(fn, delay) // 待延时时间到了再执行回调 } }
// 输入完成1s后再触发相应的回调 const inputEl = document.getElementById('inputEl') inputEl.oninput = debounce(function(event) { const value = event.target.value console.log('value的值是:', value) }, 1000)
节流:
概念:
在单位时间内多次触发某个事件,只执行一次
应用场景:
1)按钮提交事件 (也可以用loading实现,支付功能用节流更佳)
2)页面滚动事件
实现原理:设置一个时间,如果在规定时间内再次触发同一操作,则不执行该操作
代码实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | const throttle(fn, delay) { let timer = null return function (evevt) { if (timer) return false ; // 如果时间没到,不执行下一次操作 timer = setTimeouut(() => { // 如果时间到了,可以执行下一次操作,将timer清空,从头再来 clearTimeout(timer) timer = null fn(event) }, delay) } } cosnt btnEl = document.getElementById( 'btnEl' ) btnEl.addEventListener( 'click' , throttle( function (event) { console.log( "执行点击事件" ) }, 1000) |
上述代码在每次执行点击操作均需要等待,而现实需求是第一次点击一次上一次点击结束后再点击都无需等待。所以有以下优化方案
优化后的代码实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <em id= "__mceDel" > function throttle (fn, delay) { let init = false // 引入一个参数记录状态 let timer; return (event) => { if (init) return init = true clearTimeout(timer) timer = setTimeout(() => { init = false }, delay) fn(event) } }</em> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现