函数函数我们先来看一看防抖和节流比较精炼的定义：
防抖： 指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
节流：连续发生的事件在n秒内只执行一次
相信，看完上面说的定义后，有些人还是不能很好的明白他们之间的区别，那么就接下来谈一谈我对它们的理解吧。
防抖（debounce）
防抖防抖，顾名思义，就是防止手抖么，你想一下你手抖会干什么（？？？停止开车）比如一个按钮，点一下向服务器发送一个请求，你手一抖，点了好几下，一下就向服务器发了好几次请求，这不浪费时间资源么。这时候，就要有个防抖函数来帮帮你了。
当你点击这个按钮后，不管你手怎么抖，一直抖个不停的点这个按钮，都只向服务器发送一次请求，只有过了一段时间后，确定了你手不再抖后（在这一段时间你都没有再点这个按钮），你再去点击这个按钮，才会再次向服务器发送请求。
下面分析一下代码，你一定会更加的明白：
/*
@function 防抖函数（最后执行）
@param func {Function} 要执行的函数
@para wait {Number} 判断手不抖的时间
*/
const debounce=(func,wait)=>{
let timeout; //不能定义到里面，否则每次调用里面的函数，都会对timeout重新赋值
return function(){
if(timeout) clearTimeout(timeout) //这里使用timeout产生了闭包
timeout = setTimeout(function(){
func.apply(this)
},wait)
}
}
function btnClick(){
console.log('发送一次请求')
}
$('#myBtn').click(debounce(btnClick,3000));
首先会执行第18行的debounce函数，返回一个匿名函数作为按钮点点击的回调。当点击一次按钮的时候，timeout为undefined，会执行第10行的代码，设置一个定时器。当你手抖（在wait时间内有点击了按钮）的时候，会执行第9行，将上一个定时器清除，然后再设置一个新的定时器。只有你手不抖了（在wait时间内没有点击按钮），就会执行第11行，执行点击按钮所要发送的请求服务。
可以看出来，这个防抖函数，是再确定你手不抖前的最后一次点击才发送的请求数据。但有时候你并不想这样啊，你觉得，当我第一次点击的时候就要发送数据，至于后面我手抖，你控制不让我发不久好了，这样我手抖的时候，发现数据已经请求过来了，我一高兴，手不就不抖了，好的，满足你的要求。
/*
@function 防抖函数（最初执行）
@param func {Function} 要执行的函数
@para wait {Number} 判断手不抖的时间
*/
const debounce=(func,wait)=>{
let timeout;
return function(){
if(timeout){
clearTimeout(timeout);
}else{
func.apply(this)
}
timeout = setTimeout(function(){
timeout =null
},wait)
}
}
function btnClick(){
console.log('发送一次请求')
}
$('#myBtn').click(debounce(btnClick,3000));
相当于，在第一次点击，还没有设置定时器的时候，就先执行请求数据的函数，然后设置定时器用来防抖，后面不管怎么抖，timeout值都存在，只有再不抖后，才会将timeout设置为null，然后再点击的时候就又能请求数据了。
节流(throttle)
节流节流，顾名思义就是节省流量了，你想想，怎么才能节省流量。那不就减少请求呗。1秒请求3次，我改成3秒请求1次，那流量还不妥妥的节省下来了。就比如，你一个搜索框，按一下键盘向服务器发送一次请求，卡卡的，页面一直跟着你敲键盘在变化，你给老板说，看帅不，实时动态搜索，这时候老板上来就给你两耳刮子，说着，我可算知道为啥一个小项目就要买这么好的服务器了，都是你这玩意霍霍的。这时候，节流就能帮助到你了，设置个时间，这个时间内，不管怎么敲键盘，只请求一次数据，差不多输一个单词请求一次，大大节省了后台的压力，你的动态搜索也能够很好的实现。
估计这个还是比较好理解的，直接看代码就好了。
/*
@function 节流函数
@param func {Function} 要执行的函数
@para wait {Number} 时间间隔
*/
const throttle=(func,wait)=>{
let previous = 0;
return function(){
let nowtime = Date.now();
if(nowtime-previous>wait){
func.apply(this);
previous = nowtime;
}
}
}
function keyUp(){
console.log('搜索一次')
}
$('#myInput').keyup(throttle(btnClick,1000));
这个代码也比较好理解，每次按键抬起的时候，都会判断当前的时间和上一次执行搜索功能的时间的差值，判断要不要再进行一次搜索。
好了，函数的防抖与节流的区别和实现应该很清楚了。
作者：木木心丶
链接：https://www.jianshu.com/p/ea456c1cf34d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。