防抖和节流

防抖(debounce) 和节流(hrottle)平时只是听说用来防止重复操作的问题，具体也还没使用过，在这里做笔记咯。

防抖（debounce）

防抖是指触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间

效果: 如果短时间内大量触发同一事件，只会执行一次函数。

使用情况：适用于表单输入内容的验证和页面resize事件需要根据最终呈现的页面情况进行dom渲染和表单的多次提交等频繁操作。

思路：使用setTimeout实现计时，只要事件触发，就使用clearTimeout清除上一个计时器，直到规定时间停止触发后，才会执行回调函数。

分析：

1、立即执行: 触发事件后函数会立即执行，如果n秒内不触发事件才能继续执行函数。

2、非立即执行: 触发事件后函数不会立即执行，而是在n秒后执行，如果在n秒内又触发了事件，则会重新计算函数执行时间。

实现：

/**
     * @dec 函数防抖
     * @param func 执行函数
     * @param wait 延迟执行函数时间
     * @param immediate 是否立即执行，true表立即执行，false表非立即执行
     */
    function debounce(func, wait, immediate) {
        let timeout;
        return function () {
            let context = this;
            if(timeout) clearTimeout(timeout);
            if(immediate) {
                var callnow = !timeout;
                timeout = setTimeout(() => {
                   timeout = null; //作为开关变量；且作为闭包引用的变量，手动置为null让其脱离执行环境
                }, wait);
                if(callnow) func.apply(context, arguments);
            } else {
                timeout = setTimeout(() => {
                    func.apply(context, arguments);
                }, wait);
            }
        }
    }

 

节流（throttle）

节流是指高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率.

效果: 如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效.

思路：使用setTimeout来做一个简单的实现，加上一个状态位来表示当前函数是否处于工作状态：

分析：

1、定时器：在持续触发事件的过程中，函数不会立即执行，而是n秒执行一次，在停止触发后，函数还会执行一次。

2、时间戳： 在持续触发事件的过程中，函数会立即执行，而是n秒执行一次。

/**
     * @dec 函数节流
     * @param func 执行函数
     * @param wait 延迟执行函数时间
     * @param type 1表时间戳，2表定时器
     */
    function throttle(func, wait, type) {
       if(type === 1) {
           let previous = 0;
       } else if(type === 2) {
           let timeout;
       }
       return function () {
           let context = this;
           if(type === 1) {
                let now = Date.now();
                if(now - previous > wait) {
                    func.apply(context, arguments);
                    previous = now;
                }
           } else if(type === 2) {
                if(!timeout) {
                    timeout = setTimeout(() => {
                        timeout = null;
                        func.apply(context, arguments)
                    }, wait);
                }
           }
       }
    }

区别：防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。