節流と振動防止

関数ジッパー(debounce):
イベントが継続的にトリガされると、イベントは一定期間で再トリガされません.イベント処理関数は一回だけ実行されます.設定された時間が来る前に、またイベントがトリガされたら、再度遅延を開始します.

function debounce(fn, wait) {   
    var timeout = null;   
    return function() {       
        if(timeout !== null) clearTimeout(timeout);       
        timeout = setTimeout(fn, wait);   
    }
}
//     
function handle() {   
    console.log(Math.random());
}
//     
window.addEventListener('scroll', debounce(handle, 1000));

関数の流れ:
イベントを継続的にトリガすると、一定期間に一度だけイベント処理関数を呼び出すことができます.

var throttle = function(func, delay) {           
    var prev = Date.now();           
    return function() {               
        var context = this;               
        var args = arguments;               
        var now = Date.now();               
        if (now - prev >= delay) {                   
            func.apply(context, args);                   
            prev = Date.now();               
        }           
    }       
}       
function handle() {           
    console.log(Math.random());       
}       
window.addEventListener('scroll', throttle(handle, 1000));