在我们日常项目开发中，防抖函数和节流函数是我们经常会用到的性能优化手段，下面就和我一起来详细的了解一下什么是防抖函数和节流函数，及它们的应用场景。
一、防抖函数
作用：防止函数在极短的时间内反复调用，造成资源的浪费，而防抖函数会把多次执行变成最后一次执行，节省了资源。
场景：
1.页面触发频率较高的：如：滚动条滚动，窗口尺寸变化，鼠标移动，当我们触发这一类事件是，不再频繁的立即执行函数，而是等一段时间，以最后一次为计时起点，一段时间后再执行；
2.搜索场景，当一个文本框输入文字时，需要将文字发送到服务器，并从服务器得到搜索的结果；
。。。。等
实现代码：
const debounce = (fn,delay)=>{
let timer= null;
return (...args)=>{ //返回闭包函数，保留执行上下文
clearTimeout(timer);
timer = setTimeout(()=>{
fn.apply(this,args);
//this.fn(args);
},delay)
}
}
应用场景实例：
<input type="text" id="inp">
<script>
let inp = document.querySelector("#inp");
function debounce(fn,delay){
let timer= null;
return (...args)=>{
clearTimeout(timer);
timer = setTimeout(()=>{
fn.apply(this,args);
},delay)
}
}
function getZm(val){
console.log("最终"+val)
}
var newDebounceFn = debounce(getZm, 1000);
inp.onkeyup = function(e){
newDebounceFn(this.value)
}
</script>
很简单，大家可以自己动手敲一下看看效果就知道是怎么回事咯~
二、节流函数
节流函数，其实和防抖函数类似，但是节流函数是保证一段时间内只执行一次核心的代码，和定会器很像，简单讲就是会规律性的执行多次。试想我们绑定了一个事件，如scroll事件，当我们绑定滚动事件去做某件事的时候，为了她绑定了一些DOM操作，而DOM操作是很耗性能的，这时频繁的执行函数会引发大量的计算，高频率很容易使用户的浏览器崩溃。这个时候就需要用到了节流函数。
定义：
触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
场景：
1.监听scroll事件，下拉滚动条到一定位置显示返回顶部按钮；
2.监听resize事件，自适应页面是时候调整DOM的渲染；
3.keyup事件，输入文字调用接口进行模糊匹配等
实现代码：
const throttle = (fn,delay=500)=>{
let flag = true;
return (...args)=>{
if(!flag) return;
flag = false;
setTimeout(()=>{
fn.apply(this,args);
flag = true;
},delay)
}
}
应用场景实例：
<div style="height:5000px"></div>
<script>
function throttle(fn,delay){
let flag = true;
return (...args)=>{
if(!flag) return;
flag = false;
setTimeout(()=>{
fn.apply(this,args);
flag = true;
},delay)
}
}
function getScroll(v){
console.log('scroll事件触发了' + Date.now( )+v)
}
var newThrottleFn = throttle(ggetScroll, 1000);
document.onscroll = function(e){
newDebounceFn(e,'throttle')
}
</script>
防抖函数和节流函数都是为了避免一段时间内某个方法被疯狂触发，从而消耗性能。上面我用了两个例子来简要说明它们在我们日常开发中的应用，希望能够帮助到大家。
