防抖
触发高频率事件后n秒内函数只会执行一次,如果n秒内高频事件再次触发,则重新计算时间
function debounce(fn){
let timeout = null ;
return function(){
clearTimeout(timeout);
timeout = setTimeout (() =>{
fn.apply(this,arguments);
},500);
}
}
function sayHi(){
console.log("防抖成功")
}
var inp = document.getElementById('inp');
inp.addEventListener('input',debounce(sayHi))
节流
高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率
function throttle(fn){
let canRun = true ;
return function(){
if(!canRun) return;
canRun = false;
setTimeout(() =>{
fn.apply(this,arguments);
canRun = true;
},500)
}
}
function sayHi(e){
console.log(e.target.innerWidth,e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));