防抖和节流都是解决用户频繁操作的一种解决方案，区别是：

debounce 防抖

用户在频繁操作的时候，只有当用户操作结束之后，才触发需要执行的方法（比如设置5s的防抖，意思就是在5s内，不管用户操作了多少次，都不会执行，只有当用户停止操作，5s之后才执行1次）；

• 应用，当用户点击保存的时候，避免用户多次点击保存，下发多个保存接口。
• 注意：上面说了5s之后才执行，这只是防抖的一种，还有那种先立即执行一次，然后在5s不管你点击几次，都不执行，只有过了5s,在点击才会执行

throttle 节流

是用户在频繁操作的时候，用户的操作频率太快，通过设置节流，让用户操作执行的方法频率降低（比如用户设置了5s的节流，用户现在1s中操作一次，那用户第一秒第二秒，第三秒，第四秒的操作都不会执行方法，只有第五秒才会执行）

• 应用，当用户在滚动页面时，如果需要监听滚动事件，如果不设置节流，会大量执行监听事件，浪费性能，因此需要节流，比如设置500ms，才执行一次
• 注意：下面这个实现方式是通过时间戳来实现的，还可用用过setTimeout来实现，有多种方式。

debounce 防抖

//代码
function debounce(fn, t) {
    let timer;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer=  setTimeout(() => {
            fn.apply(this, arguments)
        }, t)
    }
}
//应用（此代码意思是在1s内无论点击多少次btn，都不会打印，直至停止后1s）
<button id="btn">click</button>   //html
//js
    let btn = document.getElementById('btn');
    btn.onclick = debounce(function() {
        console.log(111)
    }, 1000)

throttle 节流

//代码
function throttle(fn, t) {
        let t1 = new Date().getTime();
        return function() {
            let t2 = new Date().getTime();
            // console.log(t2, t1)
            if ((t2 - t1) >= t) {
                fn.apply(this，arguments);
                t1 = t2;
            }
        }
}
//应用（此代码是监听scroll滚动，原先是滚动多次执行，现在是滚动1s中执行一次）
window.addEventListener('scroll', throttle(function () {
    console.log(123)
}, 1000))