主要来看一下面试经常被问道的防抖和节流

1.防抖

防抖在我理解来其实就是事件触发时在n秒后调用事件绑定的方法，如果n秒内再次触发这个事件，那么重新计时。
下面以浏览器的滚动条为例，如果有这样一个需求 ：我需要监听用户浏览器的滚动事件，返回用户距离顶部的距离，那么可以用一下代码实现：

function showTop() {
        let scollTop = document.body.scrollTop || document.documentElement.scrollTop
        console.log(scollTop);
    }
    window.onscroll = showTop

但是这样做会带来一个问题，就是只要滚动条发生一点点变化：

意思就是打印的太过频繁，如果此时有一些比较复杂的操作，对于页面性能来说会造成很多不必要的开销。那么我们能不能实现这样的一个功能：在第一次触发事件时，不要立马触发函数，而是进行一个n秒的延迟（n可以根据需求进行调整），如果n秒内没有再次触发事件，就执行函数，如果n秒内我又一次的触发的滚动事件，那么取消掉上一次的事件操作，重新计时，这样子我们就可以避免没有必要的消耗。
因为需要一个变量来保存时间，但是为了防止全局变量污染，我们使用闭包来解决这个问题。

 	function showTop() {
        let scollTop = document.body.scrollTop || document.documentElement.scrollTop
        console.log(scollTop);
    }
	function debounce(fn, delay) {
        let timer = null
        return function () {
            if (timer) {
                clearInterval(timer)
            }
            timer = setTimeout(fn, delay);
        }
    }
    window.onscroll = throttle(showTop, 500)