共计 892 个字符,预计需要花费 3 分钟才能阅读完成。
微信小程序闭包 - 防抖
这里次要用到闭包,将函数内的值保留下来,下次点击的时候进入判断,如果定时器启动了,则革除定时器,直到最初一次启动定时器,也就是说,在规定的工夫内只会触发最初一次定时器,从而达到防抖成果。
防抖的应用场景:
- 避免间断疾速点击
- 避免滚动条触底时的频繁事件触发
办法一:
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> |
正文完