防抖和节流，应用场景（面试题）

防抖和节流都是防止某一时间频繁触发，但是原理却不一样。

防抖是将多次执行变为只执行一次，节流是将多次执行变为每隔一段时间执行。

防抖(debounce)：

search搜索联想，用户在不断输入值时，用防抖来节约请求资源。

window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
} 
function handle(){
    console.log(Math.random());
} 
window.addEventListener("resize",debounce(handle,1000));

节流(throttle)：

鼠标不断点击触发，mousedown(单位时间内只触发一次)

监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

function throttle(fn,wait){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
} 
function handle(){
    console.log(Math.random());
}  
window.addEventListener("mousemove",throttle(handle,1000));