JS面试题之函数防抖和函数节流

也是很经典的两个功能，面试出现的频率也很高。

函数防抖和函数节流的作用都是为了避免过于频繁的触发一些事件，节约性能。

1. 函数防抖（debounce）

所谓函数防抖，就是指在触发事件后的n秒内只执行一次相应的函数，如果n秒内再次触发了事件，则重新计时。案例：搜索框联想搜索功能。

/**
 * @param {Function} cb  满足条件执行的函数
 * @param {Number} duration 延迟时长
 * @param {Boolean} immediate 是否立即执行
 * @return {Function}
 */
 function debounce(cb, duration = 1000, immediate = true) {
     let timer;
     return function () {
         let args = arguments;
         if(timer) clearTimeOut(timer);
         if(immediate) {
             if(!timer) cb.apply(this,args);
             timer = setTimeOut(() => {
                 timer = null;
             }, duration)
         } else { 
             timer = setTimeOut(() => { // 箭头函数 不用担心this指向改变
                 cb.apply(this, args);
             }, duration)
         }
     }
 }

2. 函数节流（throttle）

函数节流，指的是在指定时间内无论触发多少次事件，只会执行一次函数。 节流会稀释函数的执行频率。
函数节流有两种实现方法：1. 定时器； 2. 时间戳

// 1. 定时器
function throttle(cb, duration) {
    let timer;
    return function() {
        if(timer) {
            return;
        }
        let args = arguments;
        timer = setTimeOut(() => {
            cb.apply(this, args);
            timer = null;
        }, duration)
    }
}

// 2. 时间戳
function throttle(cb, duration) {
    let time = 0;
    return function () {
        let now = Date.now;
        let args = arguments;
        if(now - time >= duration) {
            cb.apply(this,args);
            time = now;
        }
    }
}

如有错误，欢迎评论指出。谢谢！