小白学习节流和防抖-一一网

前言

在前端开发中，常常会遇到事件频繁调用的情况，这样会浪费性能资源。比如，在进行input框输入时，监听输入会导致监听事件地频繁调用，其实我们只需要最后一次的输入结果。又或者页面滚动事件的监听，当滚动页面时，会不断地触发滚动事件，很容易造成卡顿，所以希望每隔多长时间再触发一次滚动事件，等等。这样的情况很多，解决办法就是利用定时器（setTimeout）进行防抖或节流。在这之前，需要了解一下setTimeout、clearTimeout

setTimeout、clearTimeout、设置定时器返回值为null

setTimeout即开启一个定时器，clearTimeout即清除一个定时器，这里清除之后，定时器就彻底销毁了。而设定时器返回值为null,并不会终止定时器的执行，只是对它返回值进行了重新赋值，定时器依然存在

防抖

防抖的应用场景：连续的事件，只需触发最后一次回调，例如：

搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

防抖的原理：在间隔时间内有操作在执行，则清除新的操作，没有则触发新的操作。

function debounce(fn, delay) {
    var timer = null;
    return function () {
        var _this = this; // 取debounce执行作用域的this
        var args = arguments;
        if (timer) {
            clearTimeout(timer); // 不同点
        }
        timer = setTimeout(function () {
            fn.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.fn(args);
        }, delay);
    };
}
复制代码

节流

节流的应用场景：间隔一段时间执行一次回调，例如：

滚动加载，加载更多或滚到底部监听
谷歌搜索框，搜索联想功能
高频点击提交，表单重复提交

节流的原理：在间隔时间内如果有操作，则不触发新的操作，没有则继续触发新的操作。
节流有两种实现思路：第一种是计时器，第二种是时间戳。
节流还有一种比较好容易理解例子：打英雄联盟的平a操作，无论你点的多快，平a永远不受你的点击频率影响。

// 时间戳
function throttle(fn, delay) {
    var previous = 0;
    // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
    return function() {
        var _this = this;
        var args = arguments;
        var now = new Date();
        if(now - previous > delay) {
            fn.apply(_this, args);
            previous = now;
        }
    }
}
复制代码

// 计时器
function throttle (fn, delay) {
    var timer == null;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            return; // 不是clearTimeout
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null;
        }, delay);
    }
}
复制代码