微信小程序防抖
微信小程序闭包-防抖
这里主要用到闭包,将函数内的值保存下来,下次点击的时候进入判断,如果定时器启动了,则清除定时器,直到最后一次启动定时器,也就是说,在规定的时间内只会触发最后一次定时器,从而达到防抖效果。
防抖的使用场景:
- 防止连续快速点击
- 防止滚动条触底时的频繁事件触发
方法一:
data: {
name : null
},
time : null,
// 滚动条触底
scrollLower(){
console.log('触底',this.time);
clearTimeout(this.time)
this.time = setTimeout(()=>{
console.log('防抖',this.time);
},1000)
},
方法二:
// 滚动条触底
scrollLower(){
this.light() // 如果要携带参数在这
},
light : (function() {
let i = null
console.log('触底',i);
return function() { // 接收携带的参数在这
if(i != null) clearTimeout(i)
i = setTimeout(()=>{
console.log('防抖',i);
},1000)
}
})(),
微信小程序外层不支持const fn = function() 这种语法
,所以这里只能以对象的形式定义函数:fn : function(){}
js闭包
<button id="attick">点击</button>
<script>
let attick = document.getElementById('attick')
attick.addEventListener('click',function(){
light()
})
// 点击
const light = (function() {
let i = null
console.log('点击',i);
return function() {
if(i != null) clearTimeout(i) // 清除定时器
i = setTimeout(()=>{
console.log('点击000',i); // 1s内无操作才会触发且只触发最后一次
},1000)
}
})()
</script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)