防抖

触发高频事件后 n 秒内只会执行一次,如果 n 秒内再次触发,则重新计算

• 思路
  • 每次触发事件存一个定时器;
  • 每次触发前,先清空之前的定时器.
  • 实现上次事件未触发,就不去触发,清空.执行之后的事件

function debounce(fn){
    let timeout = null;
    return function(){
        clearTimeout(timeout);
        timeout = setTimeout(()=>{
            fn.apply(this,arguments)
        },500)
    }
}

function sayHi(){
    console.log('Hi~ o(*￣▽￣*)ブ')
}

var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi));

节流

高频触发事件,在 n 秒内只会执行一次,多次触发不会多次执行

• 思路
  • 每次触发事件前,判断是否之前的事件已完成,如果完成,就不继续了

function throttle(fn){
    let canRun = true;
    retrun function(){
        if(!canRun) return ; //判断上次事件是否执行完毕
        canRun = false; //执行事件 ,置为 false
        setTimeout(()=>{
            fn.apply(this,arguments);
            canRun = true; // 执行结束够,置为 true,允许下次触发执行
        },500);
    }
}

function sayHi(e){
    console.log(e.target.innerWidth, e.target.innerHeight);
}

window.addEventListener('resize', throttle(sayHi));