首先防抖和节流是的源码来自underscore网站写的这个库里面，这个库里面有防抖和节流的原生代码，现在大家自己的无非就是将原生代码简化的代码，如果你想认真的深入一下强烈推荐看看源码，便于之后的学习和工作。
防抖
防抖采用了闭包和定时器的方法，实现了函数在一定时间间隔内的调用，如果在这个事件内频繁的触发，则定时器会不断的刷新重新定时，当事件停下之后在间隔时间内在调用函数。
通俗的说法就是（借用网上通俗的列子本人认为是不准确的但是可以帮助理解）：当大巴车频繁有人上车的时候，司机便不会开车当没人上车的时候，到发车时间的时候汽车启动了。
防抖原生方法传入了三个参数，第一个参数是要防抖的函数名，第二个参数是限制的时间，第三个参数是true（如果事件不在触发则立马执行函数），默认不填的话就是false。详细代码看下方。
//防抖，防抖利用定时器和函数闭包实现在多次触发事件的时候，当事件暂定的时候用我们设置的时间间隔执行函数，不断清楚和启动定时器原理
function debounce(func,wait,immediate){
let timeout;
return function(){
let content = this;
let args = arguments;
if(timeout) clearTimeout(timeout);//意义为如果函数在执行则重新开始计时
if(immediate){
let run = !timeout;//第一次会运行当停下来的时候会立即执行函数
timeout = setTimeout(function(){
timeout = null;//周期性的改变null的值实现当事假停下来的时候执行函数
},wait)
//立即执行
if(run){
func.apply(content,args);
}
}
else{
//否则不会立即执行
timeout = setTimeout(function(){
func.apply(context,args)
},wait);
}
}
}
节流
节流采用的也是函数闭包时间戳的概念，其实节流也是可以用定时器实现的，但是我认为时间戳更便于理解，官网上也有节流的原生代码。节流是指在一定时间间隔，执行函数，周期性的执行函数。
官网关于节流的原生函数也有三个参数，前两个个防抖一样，但是最后一个传递的不在是布尔值而是一个对象，如果你想禁用第一次首次执行的时候，传递{leading：false}浅白的意思就是：第一次触发的时候就必须等时间间隔，如果你想禁用最后一次执行的话，传递{trailing：false}浅白的意思是：当你退出触发的时候也不在执行最后一次保留上一次的值。这两个参数可以同时传递，但是不能同时为false，因为如果同时为false就会第一次不触发时间第二次触发事件的时候立马执行上一次没执行的时间，直白的说就是执行到3的时候我退出来了，但是你又立马触发了事件那么数字会立马显示4。官网利用时间戳和定时器完成了这两个值的truefalse情况。（感兴趣的可以看看，我在项目中我没有考虑专业的实现直接是用了比较好理解的时间戳实现了一种情况）详细代码看下方。
//函数节流 在规定的时间间隔内触发事件，利用时间戳的概念
function th(fun,delay){
let old = 0;//初始时间为0
return function(){
let content = this;//如果不传出这个参数那么fun函数会指向windows对象而不是我们的时间对象
let args = arguments;//这个属性可以返回形参
begian = new Data().getTime()//获取毫秒数从1970年开始的；
if(begin - old > delay){
fun.apply(content,args);
old = begian;//更改旧的时间
}
}
}
两者的应用场景和差别
两者的差别和联系
其实防抖和节流本质上都是为了事件的频繁触发被调用，也都是在一定时间间隔内调用，最突出的区别是防抖会不断更新点定时器，而节流不会，一直会规律性运作，从官网代码上来看第三个参数不同，而且其实节流比防抖更复杂。两者都可以应用用于scroll事件。
防抖应用场景：
- 搜索框输入查询
- 表单验证
- 按钮提交事件
- 浏览器窗口缩放
节流应用场景：
- dom元素拖拽功能实现
- 计算鼠标移动的距离