防抖和节流

防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。

节流会稀释函数的执行频率。

对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。(由于setTimeout是宏任务，实际执行可能存在误差，优先推荐时间戳版)

 

~~~~~~防抖和节流，其实就是 闭包+定时器+apply/call  的综合运用 ，如果觉得上面概念绕，下面直接上代码 ~~~~~~

/* 防抖
 * 短时间内大量触发，只允许执行一次
 * fn  需要防抖的函数
 * delay  设置时间
 */

function debounce(fn, delay) {
    let timer = null;
    return function (...params) {
        if(timer) {                      // 如果定时器存在则清除，该判断条件可省略，加上便于理解
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
            return fn.apply(this, param)
        }, delay)
    }
}

// 第一次触发 timer赋值，在规定delay 时间后执行
// 第二次触发 判断是否存在timer，如果存在  则表示还未执行，规定时间未到，清除timer，重新赋值，时间重新计算

// 重复上一步操作，直到timer成功执行

/* 节流
 * 一定时间内只能执行一次，lg：淘宝抢购优惠券
 * fn  需要防抖的函数
 * delay  设置时间
 */

function throttle(fn, delay) {
    let startTime = 0;
    return function (...params) {
        let nowTime = new Date().getTime();   // 获取当前时间
        if(nowTime - startTime < delay) {                      
            return false;
        }
        startTime = nowTime;
        return fn.apply(this, param);
    }
}