1、节流的理解:节流就是利用定时器,在规定的时间内只执行一次需要执行的事件。过程就是第一次点击的时候,判断的值为空,没有进行return事件,将定时器赋值给判断的值,如果再次点击,就会执行return事件,因为函数是常驻内存,所以在规定时间内的规定事件不会执行点击事件。
let button = document.getElementById('button')
let timer;
button.onclick = function () {
if (timer) return
timer = setTimeout(() => {
console.log('点击了');
timer = null
}, 2000);
}
2、防抖的理解:防抖也是利用定时器,第一次点击后的事件都会清空,延迟执行的效果,无论点击多少次,都会在最后那次点击的时候才会执行事件。
let button = document.getElementById('button')
let timer;
button.onclick = function () {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
console.log('点击了');
timer = null
}, 1000);
}