防抖 & 节流

防抖： 连续触发事件，但在规定时间内，只会触发一次

详细解说：规定时间为2000ms，在这个时间内，如果多次触发事件，会终止上一次没有执行完的操作，重新开始计时，最终也只会执行一次。

/**
 * 防抖，取消上一次没有完成的操作，并重新开始计时
 * @param {Function} callback 事件监听回调
 * @param {Number} delay 延迟时间
 * @returns 返回一个函数，函数内部的 this 指向事件调用者
 */
function antiShake(callback, delay) {
    let timer;
    return function (...args) {
        // 1.如果定时器存在则清除此定时器
        if (timer) clearTimeout(timer);
        // 2.重新开启一个定时器
        timer = setTimeout(() => {
            // 3.改变函数 callback 的 this 指向
            callback.apply(this, args)
        }, delay);
    }
}

const but = document.querySelector('button');
but.addEventListener("click", antiShake(function (e) {
    console.log(e);
}, 2000));

节流：连续触发事件，但在规定时间内，也只会触发一次。与防抖的区别在于，节流并不会重新计时。

详细解说：规定时间为2000ms，在这个时间内，如果多次触发事件，只有第一次触发视作生效，后续的触发都视作无效。类似于游戏中的技能冷却，从第一次释放开始计时，在计时期间再次操作都视为无效操作。

/**
 * 节流，一段时间内只执行第一次操作
 * @param {Function} callback 事件监听回调
 * @param {Number} delay 延迟时间
 * @returns 返回一个函数，函数内部的 this 指向事件调用者
 */

// 1.使用标记法
function throttle(callback, delay) {
    let flag = true
    return function (...args) {
        if (!flag) return;
        flag = false;
        setTimeout(() => {
            callback.apply(this, args)
            flag = true;
        }, delay);
    }
}

// 2.当前事件触发时的时间戳 减去 上一次有效触发的时间戳来进行判断
function throttle(callback, delay) {
    let flagTime = 0
    return function (...args) {
        const now = Date.now()
        if (now - flagTime > delay) {
            flagTime = now
            setTimeout(() => {
                callback.apply(this, args)
            }, delay);
        }
    }
}