节流和防抖
1. 防抖debounce
防抖:debounce,不会立马执行的,触发后,过一段时间执行,如果在时间到达之前又触发了,那重新等待。
常用于比如我们下拉框关键字输入远程搜索,如果不做防抖,那用户一边输入关键字,搜索的请求会立马发起,在完整输入一串关键字的过程中,可能会触发多次查询,但这是无意义的,浪费资源。
1 function debounce(fn,wait){ 2 let timer; 3 return function(){
4 // 每次触发都清空之前的,然后重新等待执行 5 if(timer){ 6 clearTimeout(timer) 7 } 8 let _this = this; 9 let args = arguments; 10 timer = setTimeout(()=>{ 11 fn.apply(_this,args) 12 },wait) 13 } 14 } 15 // 以拖动窗口为例,一直拖动窗口,不会一直打印resize,只有在你停下来后,等待2s才会打印 16 window.onresize = debounce(()=>{console.log('resize')},2000)
2. 节流throttle
节流: throttle,触发后,过一段时间执行,即使在等待过程中,再次触发,会忽略掉。
1 function throttle(fn,wait){ 2 let timer; 3 return function(...args){ 4 5 if(timer){ 6 return 7 } 8 timer = setTimeout(()=>{ 9 fn(...args) 10 clearTimeout(timer) 11 },wait) 12 } 13 }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了