防抖、节流含义及其手写实现

函数防抖和函数节流：是优化高频率执行Javscript代码的一种手段，js中的一些事件，如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

一、防抖

含义：

在一段固定的时间内，只能触发一次函数，若事件再次被触发，则重新计时，多次触发事件，只执行最后一次。
（例如：登录、发短信等按钮为了避免用户点击太快，以至于发送了多次请求）……这举例应该恰当吧￣□￣｜｜
作用：

防止短时间内大量请求。（在规定时间间隔内再次发起请求，则重新计时）
应用场景：

连续的事件，只需触发一次回调的场景
- 搜索框搜索输入。（只需用户最后一次输入完，再发送请求）
- 手机号、邮箱验证输入检测。

手写实现：

主要思路：已有计时器就清除计时器，创建一个新的计时器。

fn为需要执行的回调函数，wait为计时器setTimeout的延迟执行时间（wait后执行fn）。

function debounce(fn, wait) {
    var timer;						// 维护一个 timer
    return function () {			// 使用闭包来保证计时器变量不被内存释放。
        var _this = this;			// 取debounce执行作用域的this
        var args = arguments;		// 获取事件函数传递的对象参数
        if (timer) {				// 如果已有一个触发事件在事件队列中
            clearTimeout(timer);	// 则将其删除
        }
        timer = setTimeout(function () {	// 创建一个新的计时器
            fn.apply(_this, args);		// 改变内部this并传参
        }, wait);
    };
}
复制代码

这里使用闭包的原因：解决传参和封装防抖函数的问题，这样就可以在其他地方随便将需要防抖的函数传入debounce了。

二、节流

含义：

在一段时间间隔内，只执行一次函数。（例如：一个点击事件被触发了，在这个n秒内，继续点击，疯狂点击，拼命点击都没用，必须等到过了这个n秒才行）
作用：

减少调取次数。（在一段固定时间间隔内仅执行一次）
应用场景：

间隔一段时间执行一次回调的场景
- 滚动加载，加载更多或滚到底部监听。
- 谷歌搜索框，搜索联想功能。
- 高频点击提交，表单重复提交。

手写实现：

定时器方法（常用）：

function throttle(fn, wait) {
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null;		// 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
        }, wait)
    }
复制代码

时间戳方法：

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