一、防抖

1-1 防抖基本概念

防抖具体指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数，在这 3 秒内如果遇到函数调用请求就重新计时 3 秒，直至新的 3 秒内没有函数调用请求，此时执行函数，不然就以此类推重新计时。

1-2 防抖实现原理

防抖实现原理就是利用定时器，函数第一次执行时设定一个定时器，并且通过闭包缓存起来，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器计时结束后触发函数执行。

/*
 * 防抖函数
 * @param fn 事件触发的操作
 * @param delay 多少毫秒内连续触发事件，不会执行
 * @returns {Function}
*/
function debounce(fn,delay) {
    let timer = null; //通过闭包缓存了一个定时器
    return function () {
        timer && clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(this,arguments);
        },delay);
    }
}
window.onscroll = debounce(function () {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
},200)

二、节流

2-1 节流基本概念

函数节流指的是某个函数在一定时间间隔内（例如 3 秒）只执行一次，在这 3 秒内 无视后来产生的函数调用请求，也不会延长时间间隔。3 秒间隔结束后第一次遇到新的函数调用会触发执行，然后在这新的 3 秒内依旧无视后来产生的函数调用请求，以此类推。函数节流非常适用于函数被频繁调用的场景，例如：window.onresize() 事件、mousemove 事件、上传进度等情况。

2-2 节流实现原理

实现原理就是通过一个布尔类型变量来判断是否可执行回调，当变量为true时，生成一个定时器，同时将变量取反通过闭包保存起来，当定时器执行完回调后，再将变量变为true，在变量为期false间，调用节流函数不会生成定时器。

<input type="text" value="" id="input">
$('#input').on('keyup', throttle(function () {
    console.log($(this).val());
    // ajax后台请求....
}, 1000));
/**
 * 节流函数
 * @param fn 事件触发的操作
 * @param delay 间隔多少毫秒需要触发一次事件
 * @returns {Function}
 */
function throttle(fn, delay) {
    let flag = true;
    return function () {
        if (!flag) {
            return;
        }
        flag = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            flag = true;
        }, delay);
    }
}