性能优化是前端老生常谈的问题,今天看了下防抖节流这块的东西,觉得挺有意思的
就敲了一个小例子
首先是防抖
个人理解防抖是有一个延时执行 也就是说我现在点击一个事件我有可能让他延迟0.3s触发,如果在者0.3s内又触发了,就不让它触发, 就重新计算周期到规定的时间再触发
<button id='btn'>点击</button>
防抖
<script>
var btn= document.getElementById('btn')
function debounce(fn, delay) {
let timer = null; //一开始函数的执行状态
return function () {
// 清理掉正在执行的函数,并重新执行
clearTimeout(timer); // 如果不清的话连续点击过后在延迟这个时间都一起执行了 因为时间够了 应该不累加,只要它点了我就重新计算然后执行
timer = setTimeout(function () {
fn();
}, delay);
}
}
let num = 0; // 记录当前函数调用次数
// 当点击按钮时执行的函数
function foo() {
num++;
console.log('调用了'+num+'次');
}
btn.addEventListener('click',debounce(foo,2000))
</script>
节流
function throttle(fn) {
let flag = true; // 保存一个状态 一开始为true
return function () {
// 在函数开头判断标记是否为true,不为true则return
if (!flag) return;
// 立即设置为false
flag = false;
// 将外部传入的函数的执行放在setTimeout中
setTimeout(() => {
// 当定时器没有执行的时候标记永远是false,在开头被return掉
fn();
// 最后变成true表示函数执行过了 可以开始重新循环了
flag = true;
}, 1000);
};
}
function sayHi() {
console.log('我被点击了');
}
btn.addEventListener('click', throttle(sayHi))
节流就是一定时间内触发几次 三秒内触发一次 在三秒内连续触发 只执行一次