事件がどんどん進む

なぜ節流しますか?
いくつかのシーンでは、イベントの頻繁なトリガのために、頻繁にDOM操作、リソースローディング、例えば、resize、scroll、mousemooveが行われます.UIカードトンによってブラウザが崩壊することもあります.だから、この時、事件の流れはかなり重要です.
節流と防振にはどのような違いがありますか?1、ブレ防止
高周波イベントをトリガした後、n秒以内の関数は一回だけ実行し、n秒以内の高周波イベントが再びトリガされたら、時間を再計算します.

方法:

各トリガイベントがキャンセルされる前の遅延コール方法

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

function sayHi(){
    console.log('  ');
}

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

2、スロットル
高周波イベントはトリガしますが、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));