JS—— 防抖/节流

1.防抖
在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担

1.当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次
2.将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

//fn 执行函数 wait 延迟时间
function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}
// 滚动事件
window.addEventListener('scroll', debounce(fn, 1000));

1.节流

1.当持续触发事件时，保证一定时间段内只调用一次事件处理函数
2.使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数

//fn 执行函数 wait 时间段
var throttle = function(fn, delay) {     
    var timer = null;     
    var startTime = Date.now();     
    return function() {             
        var curTime = Date.now();             
        var remaining = delay - (curTime - startTime);             
        var context = this;             
        var args = arguments;             
        clearTimeout(timer);              
        if (remaining <= 0) {                    
            func.apply(context, args);                    
            startTime = Date.now();              
        } else {                    
            timer = setTimeout(fn, remaining);              
        }      
    }
}
// 滚动事件
window.addEventListener('scroll', throttle(fn, 1000));