DT走过的路

函数防抖

函数防抖，是指防止函数在极短的时间内反复调用，造成资源的浪费。

函数防抖，其实就是防止函数短时间内被调用多次。

要完成该函数，需要给予两个条件：

1. 告诉我一段时间后要做什么事（这里应该是一个回调函数，即函数作为参数）
2. 告诉我要等待多长时间（毫秒）

函数防抖的通用函数：

/**
 * 函数防抖
 * @param {function} func 一段时间后，要调用的函数
 * @param {number} wait 等待的时间，单位毫秒
 */
function debounce(func, wait) {
    // 设置变量，记录 setTimeout 得到的 id
    var timerId = null;
    return function (...args) {
        if (timerId) {
            // 如果有值，说明目前正在等待中，清除它
            clearTimeout(timerId);
        }
        // 重新开始计时
        timerId = setTimeout(() => {
            func(...args);
        }, wait);
    }
}

函数节流

函数节流的目的，也是为了防止一个函数短时间内被频繁的触发。

和函数防抖的原理不同，函数节流的核心思想是让连续的函数执行，变为固定时间段间断地执行。

关于节流的实现，有 2 种主流的实现方式，一种是使用时间戳，一种是设置定时器。

（1）使用时间戳

触发事件时，取出当前的时间戳，然后减去之前的时间戳（最一开始值设为 0），如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。

下面是封装使用时间戳的函数节流的通用函数：

/**
 * 
 * @param {要进行节流的函数} func 
 * @param {间隔时间} wait 
 * @returns 
 */
function throttle(func, wait) {
    var args; // 存储函数参数
    var previous = 0; // 一开始的默认时间
    return function () {
        var now = new Date(); // 获取最新的时间戳
        args = arguments; // 获取参数
        // 进行时间戳的判断，如果超出规定时间，则执行
        if (now - previous > wait) {
            func.apply(null, args);
            previous = now;
        }
    }
}

（2）设置定时器

第二种方式是设置定时器，触发事件时设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

下面是封装使用定时器的函数节流的通用函数：

/**
 * 
 * @param {要节流执行的函数} func 
 * @param {节流的时间间隔} wait 
 * @returns 
 */
function throttle(func, wait) {
    // timeout 存储计时器返回值
    // args 存储参数
    var timeout, args;
    return function () {
        args = arguments;
        // 如果 timeout 有值，说明上一次的执行间隔时间还没过
        if (!timeout) {
            // 进入此 if 说明时间间隔已经过了
            // 先执行一次要执行的函数
            func.apply(null, args)
            // 然后重新设置时间间隔
            timeout = setTimeout(function () {
                timeout = null;
            }, wait);
        }
    }
}