防抖
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

思路
每次触发事件时都取消之前的延时调用方法

/* 防抖 */
    function dou(fn, wait) {
        var time = null;
        return function () {
            clearTimeout(time)
            // time = setTimeout(function () {
            //  console.log(this)//window 
            //  fn.apply(this, arguments)//这样的话 this为window和直接 fn()调用是一样的效果，因为他们的this都是window
            // }, wait);
            time = setTimeout(() => {
                // console.log(this)//div
                fn.apply(this, arguments)//确保dou函数的this（上下文还是div）
            }, wait);
        }
    }
    function demo() {
        console.log('防抖啦')
    }
    // 用句柄事件绑定调用dou事件，所以this为div节点对象
    document.querySelector('div').addEventListener('scroll', dou(demo, 1000))

节流
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

思路
每次触发事件时都判断当前是否有等待执行的延时函数

/* 节流 */
    function throttle(func, wait) {
        var previous = 0;
        return function () {
            var now = +new Date();
            if (now - previous > wait) {
                func.apply(this, arguments);
                previous = now;
            }
        }
    }
    function getUserAction() {
        console.log(`每秒1秒内打印一次`)
    }
    document.querySelector('div').addEventListener('click', throttle(getUserAction, 1000))