闭包
由于节流和防抖函数的实现都用到了闭包，所以在了解节流和防抖之前我先简单介绍下什么是闭包。
由于js代码在一个执行环境中执行时，会创建变量对象的一个作用域链。作用域链用来指定执行环境有权访问的所有变量和函数的访问顺序，这导致外部环境无法访问内部环境的参数。为了能够访问内部函数的参数，就产生了闭包的概念。
闭包是指有权访问另一个函数内部变量的函数，创建闭包一般是以在一个函数内返回一个函数的形式。它的本质就是一个函数。
functionA(){varx=1;returnfunction(){x++;console.log(x);}}vara=A();//第一次执行A函数 a();//2a();//3
可以看到，a指向函数A的返回函数，运行完A()后，A的执行环境被释放，但是由于返回的函数中有对变量x的引用，故再释放时不会释放掉x，每次调用a()时都保持对x的引用，因此x一直增加。
节流
想象你坐地铁，到站后指定时间内，不管上来多少人，都会在地铁预定好的时间点（比如30秒后）开车。节流的实质就是在指定时间内，函数值执行一次。js中的使用场景一般是监听onscroll时频繁需要获取滚动条位置以及视窗的onsize。
一般有两种实现方式，一种是同步的使用时间戳方式，一种是使用异步的定时器方式
时间戳方式
大致解决思路如下：
（1）函数定义一个上次触发的时间参数last，返回一个闭包，闭包中保持对上次触发时间的引用
（2）闭包中，获取当前时间cur，比较当前时间和上次触发的时间差，大于我们设置的delay值就执行传入的fn函数
functionthrottle(fn,delay){letlast=0；returnfunction(){letcur=+newDate();// +是一元操作符，利用js隐式转换将其他类型变为数字类型if(cur>=last+delay){fn.apply(this,arguments);last=cur;}}}
定时器方式
大致解决思路如下：
（1）函数定义一个定时器timer，返回一个闭包，闭包中保持对timer的引用
（2）闭包中，判断timer是否存在，存在说明距离上次触发时间不超过delay，不做处理。不存在就重新设置一个定时器在delay时间后触发。触发后执行函数fn并清除定时器。
functionthrottle(fn,delay){lettimer,context；returnfunction(){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）定时器方式，由于是异步的，第一次调用不会执行，但是事件不再触发后，仍然会最后调用一次
结合上面两种方式优化，实现一次调用，两次执行，即首次和末次都执行，代码如下：
functionthrottle(fn,delay){varlast,timer;threshhold||(threshhold=250);// 默认间隔为 250msreturnfunction(){varcontext=this；varargs=arguments；varnow=+newDate()；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，再创建新的定时器，这样就能实现，每次事件触发时都开始新的等待。
实现代码如下：
functiondebounce(fn,delay){lettimer;returnfunction(){constcontext=this;clearTimeout(timer);timer=setTimeout(function(){fn.apply(context,arguments);},delay)}}
总结
函数防抖：原理是维护一个计时器，规定在delay时间后触发函数，如果在delay时间内再次触发就取消之前的计时器重新设置。即实际上，只有最后一次操作能真正被执行。
函数节流：原理是通过判断是否到达规定的delay时间间隔来触发函数，不管事件触发有多频繁，每隔delay时间都会执行一次函数。
作者：_章鱼小丸子
出处：//www.greatytc.com/p/7c7adb5b7666
