防抖和节流的封装

• 防抖

对于频繁触发操作，只识别一次

/* 
 * @Params
 * func[function]: 触发的函数
 * wait：识别频率
 * immedate：默认多次操作，我们识别的是最后一次，但是immedate = true，让其识别第一次
 */
function debounce(func, wait = 1000, immedate = false) {
    let timer = null
    return function anonymouse(...params) {
        let now = immedate && !timer;

        // 每次点击都清除之前设置的定时器
        clearTimeout(timer)

        // 重新设置一个新的定时器 监听wait时间内是否触发第二次 
        timer = setTimeout(() => {
            // 手动让其回归到初始状态
            timer = null;

            // wait怎么久的等待，没有触发第二次
            !immedate ? func.call(this, ...params) : null
        }, wait);

        now ? func.call(this, ...params) : null
    }
}

function fn(item){
  console.log(1)
  console.log(item)
}

document.body.onclick = debounce(fn,300,true)

• 节流

在一段频繁操作中，可以触发多次，但是触发的频率由自己指定

/* 
 * @Params
 * func[function]: 触发的函数
 * wait：触发频率
 */
function throttle(func, wait = 300) {
    let timer = null,
        previous = 0; // 纪录上一次操作的时间
    return function anonymouse(...params) {
        let now = new Date(),
            remaining = wait - (now - previous); // 记录还差多少时间达到触发一次的频率
        if (remaining <= 0) {
            // 两次操作时间超过awit了
            window.clearTimeout(timer)
            timer = null;
            previous = now;
            func.call(this, ...params)
        } else if (!timer) {
            // 两次操作时间还没有超过awit了
            timer = setTimeout(() => {
                timer = null;
                previous = new Date();
                func.call(this, ...params)
            }, remaining);
        }
    }
}