手写防抖
- 如果存在之前的计时器,取消重新计时。 即多次点击只执行最后一次
- 注意this指向和回调形参列表
<button onclick="clickMe(1)">click me</button>
<script>
const clickMe = debounce((a) => {
console.log(a);
}, 500)
function debounce(fn, timeout) {
let timer = null
return function () {
let context = this
let args = Array.prototype.slice.call(arguments)
if (timer) {
clearTimeout(timer)
timer = null
}
timer = setTimeout(() => {
fn.apply(context,args)
}, timeout);
}
}
</script>
手写节流
- 只在固定的一段时间之后执行
- 在定时器回调里清除timer,如果当前已经有timer了,直接return, 实现一段时间内只执行一次
<button onclick="clickMe(1)">click me</button>
<script>
const clickMe = throttle((a) => {
console.log(a)
}, 2000)
function throttle(fn, delay) {
let timer = null
return function () {
if (timer) return
const args = Array.from(arguments)
timer = setTimeout(() => {
fn.apply(this, args)
clearTimeout(timer)
timer = null
}, delay);
}
}
</script>