js 函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]

前言：

        本人纯小白一个，有很多地方理解的没有各位大牛那么透彻，如有错误，请各位大牛指出斧正！小弟感激不尽。

        函数防抖与节流是做什么的？下面进行通俗的讲解。

本文借鉴：https://www.cnblogs.com/cc-freiheit/p/10827372.html

大致原理：

        函数防抖:   函数防抖做一件事，这件事并不是立即去做，而是等到一段时间之后再去做。如果这段时间内有一个东西再次触发了，那么就再等一次时间。

        函数节流:   函数节流是指在某一段时间，去执行意见事，但是他不会重新停止计时，他只能保证在某一段时间内运行一次。

函数节流与函数防抖的区别：

    函数节流是固定一段时间运行，会持续触发事件。函数防抖则是在一段事件内运行一次以后不会持续触发事件，要等一段时间才会再次触发。

准备工作：

    <div class="text"
        style="height:150px; line-height:150px; text-align:center; color:#000000; background-color:rgb(212, 233, 163); font-size:80px;">
    </div>

    <script>
        var text = document.querySelector('.text');
        var num = 1;
        function count() {
            text.innerHTML = num++;
        };
        text.onmousemove = debounce(count, 1000);
    </script>

    上面代码运行时，鼠标在绿色区域移动时，由于count函数的持续触发，会导致下图效果

  

    为了避免频繁触发，我们可以使用函数防抖和函数节流来限制频繁触发

函数防抖：

    // 非立即执行版
    <script>
        function debounce(callback, time) {
            var timer;
            return function () {
                var args = arguments;
                var self = this;
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(function () {
                    callback.apply(self, args);
                }, time)
            }
        }
    </script>

使用方法：

text.onmousemove = debounce(count, 1000);

非立即执行版的意思是触发事件后函数不会立即执行，而是在 time秒后执行，如果在 time 秒内又触发了事件，则会重新计算函数执行时间。(鼠标移出元素时还会触发最后一次)效果如下：

  

    // 立即执行版
    <script>
        function debounce(callback, time) {
            var timer;
            return function () {
                var args = arguments;
                var self = this;
                if (timer) {
                    clearTimeout(timer);
                }
                var callNow = !timer;
                timer = setTimeout(function () {
                    timer = null;
                }, time);
                if (callNow) {
                    callback.apply(self, args);
                }
            }
        }
    </script>

立即执行版的意思是触发事件后函数会立即执行，然后 time 秒内不触发事件才能继续执行函数的效果。用法同上。（鼠标移出元素时，视time的间隔而确定是否触发最后一次）效果如下

  

函数节流：

<script>
        //  定时器版
        function throttle(callback, time) {
            var timer;
            return function () {
                if(timer) {
                    return;
                }
                var args = arguments;
                var self = this;
                timer = setTimeout(function () {
                    callback.apply(self, args);
                    timer = null;
                },time);
            }
        }
</script>

使用方法：

text.onmousemove = throttle(count, 1000);

效果如下

  

定时器执行版的意思是在持续触发事件的过程中，函数不会立即执行，并且每 1s 执行一次。(在移出触发事件后，函数还会再执行一次。)

<script>
        // 时间戳版
        function throttle(callback, time) {
            var t = 0; // 定义一个时间戳
            return function () {
                var nowDate = Date.now(); //获取当前时间戳
                console.log(nowDate)
                var args = arguments;
                var self = this;
                if (Date.now() - t >= time) {
                    callback.apply(self, args);
                    t = Date.now();
                }
            }
        }
</script>

使用方法：

text.onmousemove = throttle(count, 1000);

效果如下

  

时间戳版的意思是在持续触发事件的过程中，函数会立即执行，并且每 1s 执行一次。(在移出触发事件后，函数还会再执行一次。)

函数防抖合并插件版

// helpers.js
/**
 * 函数防抖
 * @param {Function} callback 回调函数
 * @param {Number} time 延迟的时间
 * @param {Boolean} immediate 是否立即执行
 */
this.myPlugin.debounce = function (callback, time, immediate) {
    // 设置默认值（如果用户未传参数immediate的情况下）
    if (immediate === undefined) {
        immediate = true;
    }
    var timer;                     // 定义一个定时器
    if (immediate) {
        return function () {
            clearTimeout(timer);   // 直接清楚之前的定时器
            var self = this;       // 保存this的值
            var args = arguments;  // 利用闭包保存参数数组
            var callNow = !timer;  // 取反
            timer = setTimeout(function () {
                timer = null;      // 清空定时器
            }, time)
            if (callNow) {
                callback.apply(self, args);  //调用apply进行参数的传入
            }
        }
    } else {
        return function () {
            clearTimeout(timer);   // 直接清除之前的定时器
            var self = this;       // 保存this的值
            var args = arguments;  // 利用闭包保存参数数组
            timer = setTimeout(function () {
                callback.apply(self, args);  // 调用apply进行参数的传入
            }, time);
        }
    }
}

函数节流合并插件版

// helpers.js
/**
 * 函数节流
 * @param {Function} callback 回调函数
 * @param {Number} time 延迟的时间
 * @param {Boolean} immediate 是否立即执行
 */
this.myPlugin.throttle = function (callback, time, immediate) {
    if (immediate === undefined) {// 设置默认值（如果用户未传参数immediate的情况下）
        immediate = true;
    }
    if (immediate) {
        var t;                     // 定义一个时间戳，默认为null
        return function () {
            var self = this;       // 保存this的值
            var args = arguments;  // 利用闭包保存参数数组
            // 只要时间没有值就可以执行函数 或 距离上次执行的时间已超过规定的值
            // 当前时间戳 - 之前的时间戳 ≥ 传入的时间
            if (!t || Date.now() - t >= time) {
                callback.apply(self, args);
                t = Date.now();
            }
        }
    } else {
        var timer;
        return function () {
            if (timer) {
                return;// 如果有计时器的情况下直接返回
            }
            var self = this;       // 保存this的值
            var args = arguments;  // 利用闭包保存参数数组
            timer = setTimeout(function () {
                callback.apply(self, args);  // 调用apply进行参数的传入
                timer = null;      // 函数节流要清空定时器，如果这里不清空，他会发现上面一直有定时器(return那里)，就不会再次运行了
            }, time)
        }
    }
}

插件这样使用：

<!--插件要考虑通用性，易用性，尽量不要与其他功能冲突，防止污染太多的window上的全局变量，因此我这里使用多个js文件只污染一个全局变量的方式！在helpers.js中添加如下代码
if (!this.myPlugin) {
    this.myPlugin = {};
}
-->

<script src="../../plugin/helpers.js"></script>  <!--引入插件-->
<script>
        var handle = myPlugin.debounce(function (width) {  // 调用插件
            console.log(width);                            // 打印浏览器视口宽度
        }, 1000);                                          // 每隔1000毫秒打印一次
        window.onresize = function () {
            handle(document.documentElement.clientWidth);  // 浏览器窗口改变时触发
       }
</script>

结语

• 怀着瑟瑟发抖的心情发了第一篇知识博客，有哪儿写错的请各位大牛指出。

• 好想进入小白之列，与大牛肩并脚。