闭包
由于节流和防抖函数的实现都用到了闭包，所以在了解节流和防抖之前我先简单介绍下什么是闭包。
由于js代码在一个执行环境中执行时，会创建变量对象的一个作用域链。作用域链用来指定执行环境有权访问的所有变量和函数的访问顺序，这导致外部环境无法访问内部环境的参数。为了能够访问内部函数的参数，就产生了闭包的概念。
闭包是指有权访问另一个函数内部变量的函数，创建闭包一般是以在一个函数内返回一个函数的形式。它的本质就是一个函数。
function A(){
var x = 1;
return function(){
x++;
console.log(x);
}
}
var a = A(); //第一次执行A函数
a(); //2
a(); //3
可以看到，a指向函数A的返回函数，运行完A()后，A的执行环境被释放，但是由于返回的函数中有对变量x的引用，故再释放时不会释放掉x，每次调用a()时都保持对x的引用，因此x一直增加。
节流
想象你坐地铁，到站后指定时间内，不管上来多少人，都会在地铁预定好的时间点（比如30秒后）开车。节流的实质就是在指定时间内，函数值执行一次。js中的使用场景一般是监听onscroll时频繁需要获取滚动条位置以及视窗的onsize。
一般有两种实现方式，一种是同步的使用时间戳方式，一种是使用异步的定时器方式
时间戳方式
大致解决思路如下：
（1）函数定义一个上次触发的时间参数last，返回一个闭包，闭包中保持对上次触发时间的引用
（2）闭包中，获取当前时间cur，比较当前时间和上次触发的时间差，大于我们设置的delay值就执行传入的fn函数
function throttle(fn, delay) {
let last= 0；
return function() {
let cur = +new Date(); // +是一元操作符，利用js隐式转换将其他类型变为数字类型
if(cur >= last+ delay) {
fn.apply(this, arguments);
last = cur;
}
}
}
定时器方式
大致解决思路如下：
（1）函数定义一个定时器timer，返回一个闭包，闭包中保持对timer的引用
（2）闭包中，判断timer是否存在，存在说明距离上次触发时间不超过delay，不做处理。不存在就重新设置一个定时器在delay时间后触发。触发后执行函数fn并清除定时器。
function throttle(fn, delay) {
let timer, context；
return function(){
context = this;
if(!time){
time = setTimeout(function(){
fn.apply(context, arguments);
clearTimeout(timer);
}, delay);
}
}
}
使用方式
两种方式的使用方法都是一致的：
$(document).on('mousemove', throttle(function(e) {
// 代码
}, 250))
这个代码监听鼠标移动事件，当鼠标移动后执行回调函数，也就是throttle(functiono(e){ ... },250)，这个回调函数指向的是throttle返回的闭包函数。每触发一次鼠标移动事件，就会执行闭包函数。
注意：fn.apply(context, arguments)指把fn的this绑定到context对象上并执行，这里的context是函数调用时的上下文。
结合优化
以上两中实现方式分别存在问题：
（1）时间戳方式，第一次调用必定执行，但是不会执行最后一次调用
（2）定时器方式，由于是异步的，第一次调用不会执行，但是事件不再触发后，仍然会最后调用一次
结合上面两种方式优化，实现一次调用，两次执行，即首次和末次都执行，代码如下：
function throttle(fn, delay) {
var last, timer;
threshhold || (threshhold = 250); // 默认间隔为 250ms
return function () {
var context = this；
var args = arguments；
var now = +new Date()；
if (last && now < last + delay) {
clearTimeout(timer)；
timer = setTimeout(function () {
last = now；
fn.apply(context, args)；
}, delay)；
} else {
last = now；
fn.apply(context, args)；
}
}
}
防抖
想象你坐公交车，公交车到站后，乘客陆续上车，一直等到没有人上车之后，司机再发动开车。防抖的实质就是等一段时候后，如果没有再次触发事件，处理函数才会执行一次。防抖函数常用于用户输入，等到用户输入完再去发起查询请求，而不是每输入一个字就发起请求。
思路：
（1）函数定义一个定时器timer，返回引用定时器的闭包函数
（2）闭包函数中，每次调用，先清除上次的timer，再创建新的定时器，这样就能实现，每次事件触发时都开始新的等待。
实现代码如下：
function debounce(fn, delay){
let timer;
return function() {
const context = this;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, arguments);
},delay)
}
}
总结
函数防抖：原理是维护一个计时器，规定在delay时间后触发函数，如果在delay时间内再次触发就取消之前的计时器重新设置。即实际上，只有最后一次操作能真正被执行。
函数节流：原理是通过判断是否到达规定的delay时间间隔来触发函数，不管事件触发有多频繁，每隔delay时间都会执行一次函数。
网友评论