前端防抖节流

/**
 * 防抖核心代码
 * 逻辑是
 * 第一次点完以后开始计时
 * 如果单位时间内点了的话
 * 不但无效，而且时间从头计算
 *
 * 例如
 * 设置3000毫秒
 * 第一次点完如果3秒内再次点击
 * 不但不触发任何效果，而且3秒从头开始算
 * 如果一直点一直点，就永远无效
 */
function debounce(fn, timer) {
    let timeout = null;
    return function () {
        if (timeout) {
            clearTimeout(timeout);
        } else {
            fn.apply(this, arguments);
        }
        timeout = setTimeout(() => {
            timeout = null;
        }, timer);
    }
}


/**
 * 节流核心代码
 * 逻辑是
 * 第一次点完以后开始计时
 * 如果下次点击时间没达到设定时间
 * 则无效，否则有效
 *
 * 例如
 * 设置3000毫秒
 * 第一次点击完过了1秒点击 判定为无效 立刻记录当前时间
 * 过了2秒点击 与上一次时间对比 不足3秒 判定无效
 * 过了3秒以上点击 与上次时间对比 足够3秒 判定有效 并立刻记录当前时间
 *
 */
function throttle(fn, delay) {
    let begin = 0;
    return function () {
        const current = new Date().getTime();
        if (current - begin > delay) {
            fn.apply(this, arguments);
            begin = current;
        }
    }
}

/** 简单例子 */
bt0.addEventListener('click', click0, false);
bt1.addEventListener('click', debounce(click1, 1000), false);
bt2.addEventListener('click', throttle(click2, 1000), false);