Js中防抖和节流的区别，论如何避免重复点击

在进行窗口的resize、scroll，输入框内容校验，防止按钮重复点击等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，体验糟糕。所以可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。
我们一起先来看看防抖和节流的区别

名称	相同点	区别
防抖	都是防止函数多次被调用	重复调用时，只有最后的一次会执行
节流		重复操作时，间隔一定的时间才调用

防抖函数 debounce

// 防抖
function debounce(fn, wait = 20) {
    let timeout = null
        return function() {
            if (timeout !== null) {
                clearTimeout(timeout)
            }
        timeout = setTimeout(fn, wait)
    }
}

节流函数 throttle

// 节流
function throttle(fn, delay = 20) {
    let last = Date.now()
    return function() {
        let now = Date.now()
        if (now - last > delay) {
            fn()
            last = now
        }
    }
}

如何调用

function handle() {
    console.log('你点我了，在这里执行你想要执行的操作！')
}
// 防抖调用方式
document.querySelector('button').onclick = debounce(handle, 300)
// 节流调用方式
document.querySelector('button').onclick = throttle(handle, 300)

防抖和节流都利用了闭包，首先就调用了debounce和debounce方法，把内部的方法返回出去，下次自己执行，以后有时间我再写一下闭包吧，所以我还留下一个问题，这样会不会造成内存泄漏？