节流阀:可以减少一段时间内事件触发的频率,指定时间内只能触发一次;
// 1、先定义一个节流阀
let timer = null;
// 2、开启延时器
timer = setTimeout(() => {
// 所要执行的操作
// 执行完后将节流阀设置为null
timer = null;
}, 500);
// 3、开启延时器之前都要判断节流阀是否为空 注:这个判断一定要放在开启延时器之前
if (timer) { return }
例子:
// 例子:500毫秒内只能点击一次
let btn = document.querySelector('.btn');
let timer = null;
btn.addEventListener('click', function () {
if (timer) { return }
timer = setTimeout(() => {
console.log('500毫秒内只能点击一次');
timer = null;
}, 500);
})
顺便讲下防抖与节流的区别:
防抖:如果事件被频繁触发,防抖能保证只有最后一次触发生效!前面多次的触发都会被忽略!
节流:如果事件被频繁触发,节流能够减少事件触发的频率,因此,节流是有选择性地执行一部分事件!