防抖
是触发间隔大于time才会触发,每次在小于间隔time点击的时候,会重置time
节流
是不管time内触发多少次,只会每间隔time时间才会触发一次
假设time = 100ms,一人间隔50ms输入一个字符,那么500ms后,防抖触发1次,节流触发5次
举个例子:
防抖
const functiona(){
let timer;
clearTimeout(timer);
timer = setTimeout(() => {
this.functionb()
},500}
}
const functionb(){
console.log('执行了一次')
}
节流
function throttle(fn, time) {
let temp = false;
return function () {
if (temp) {
return;
} else {
temp = true; //节流阀设置为true
setTimeout(() => {
fn.apply(this, arguments);
temp = false;
}, time);
}
};
}
function sayHi(e) {
console.log("宽", e.target.innerWidth);
}
window.addEventListener("resize", throttle(sayHi, 1000));