面试复习：请解释什么是防抖和节流？

防抖

场景：像鼠标移动或者搜索框聚焦，多次触发事件，但只有最后一次事件触发才执行回调函数。

用户触发事件 - 判断是否有定时器 - yes - 清空原有定时器 - 设置新的定时器 - 定时后执行回调

                                                               |__________no________________|

function debounce(fn,delay){
    var timer = null;
    return function(){
        var that = this;
        var args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            fn.apply(tha,args);
            },delay||500)
    }
}

节流

场景：像点击提交表单事件，用户会多次触发事件，只取第一次事件，在一段时间内的后续事件触发不生效。

用户触发事件 - 判断是否有定时器 - yes - 结束

                                     |_______no_______设置新的定时器 - 结束后执行回调 - 清空定时器

function throttle(fn,delay){
    var timer = null;
    return function (){
        if(timer){return false}
        var that = this;
        var args = arguments;
        fn.apply(that,args);
        timer = setTimerout(function(){
            clearTimeout(timer)
            timer = null;
        },delay||500);
    }
}

参考资料：

理解节流 & 防抖

面试官：请你说一说函数节流和防抖