防抖和节流

防抖

原理：在事件被触发的n秒之后执行回调，若在n秒内再次触发则重新计算事件。
适用场景：

搜索框联想场景：防止每次输入发送请求，只发送最后一次。

按钮提交场景：按钮重复点击，只执行最后一次提交

实现：

function debounce(fn, wait) {
    let timeout;
    return function () {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            fn.apply(context, args)
        }, wait)
    }
}

节流

原理：在一段时间内，只触发一次函数，若触发多次则只有一次生效。
适用场景：

拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动

缩放场景：监控浏览器resize

实现：当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

function throttle(fn, wait){
    let timeout;
    return function(){
        const _this = this;
        const args = arguments;
        if(!timeout){
            timeout = setTimeout(function(){
                timeout = null;
                fn.apply(_this, args);
            }, wait)
        }
    }
}