节流与防抖【简易】

节流和防抖算是前端面试的常考点，也有面试时需要手写防抖和节流的可能，那么就让我带你来了解一下防抖和节流吧。

想象一个场景，用户点击登录按钮。理想状态下，用户点击一下就会等待响应，然后登录成功。在不理想情况下，用户疯狂的点击登录按钮，于是向后端发送了n多个登录请求。可是我们只需要一次就可以了，于是我们要限制用户在短时间内的多次重复操作。

于是，我们需要防抖和节流，他们都是为了控制函数的调用频率。

当然，在上述的场景预设中，你也可以设置在点击登录按钮后，出现一个不透明遮罩层+Loading组件，来避免用户重复点击。

他俩的区别：
节流：函数在一段时间内的多次调用，仅第一次有效
防抖：函数在一段时间内的多次调用，仅使得最后一次调用有效

它们两个主要用于函数调用频率过高的地方，比如onmousemove(鼠标移动触发)、resize()方法(调整浏览器窗口大小触发)、scroll(滚动触发)…

节流

1. 时间戳版

/*
* func [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function throttle(func, delay) {
    var last = 0;	//借助闭包维护全局纯净
    return function () {
        var now = Date.now();
        if (now >= delay + last) {
            func.apply(this, arguments);
            last = now;
        } else {
            console.log("距离上次调用的时间差不满足要求哦");
        }
    }
}

2. 定时器版

function throttle(func, delay) {
    var timer = null;
    return function () {
        if (!timer) {
            func.apply(this, arguments);
            timer = setTimeout(() => {
                timer = null;
            }, delay);
        } else {
            console.log("上一个定时器尚未完成");
        }
    }
}

防抖

防抖：函数在一段时间内的多次调用，仅使得最后一次调用有效

function debounce(func, delay) {
    var timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(()=>{
            func.apply(this, arguments);
        }, delay);
    }
}

如果上面的代码理解有困难的，可以去看一下关于闭包,apply()。

一些无关紧要的废话：这篇文章在我的草稿箱里待了快两年，真是可怜。

参考资料：大帅老猿