SOURCE

//防抖在触发事件后隔一段时间才执行事件，如果在这段时间内重新触发事件会重置时间
function fangdou(func, upTime) {
    let outTime;
    return function () {
        if (outTime) {
            clearTimeout(outTime)
        }
        outTime = setTimeout(func, upTime)
    }
};
let p = document.querySelector("p");
p.addEventListener("click", fangdou(function () {
    console.log(new Date())
}, 1000))


//节流在触发事件后执行事件后要隔一段时间才会才是触发事件，在这段时间触发事件也不会执行
function jieliu(func, upTime) {
    let isRun = false;
    return function () {
        if (isRun == false) {
            isRun = true;
            func();
            setTimeout(function () {
                isRun = false
            }, upTime)
        }

    }
}
let botton = document.querySelector("botton");
botton.addEventListener("click", jieliu(function () {
    console.log(new Date())
}, 2000))

<p>防抖</p>
<botton>节流</botton>