性能优化之防抖与节流

防抖和节流都是一种性能优化的手段

1. 防抖（debounce）

实现原理: 函数被触发时,先延迟执行的时间,在延迟的时间内如果再次被触发,则取消之前的延迟,再重新开始新的一轮延迟,达到只执行最后一次请求,其他请求则被过滤掉的效果。

通俗来讲就是:持续触发（事件）不执行，不触发的一段时间后才执行.（例如英雄回城）

实现思路：首次运行时把定时器赋值给一个变量，第二次执行时，如果间隔没超过定时器设定的时间则会清除掉定时器，重新设定定时器，依次反复，当停止下来时，没有执行清除定时器，超过一定时间后触发回调函数。

// fn为传入的函数 delay为需要传入的延迟的时间
function debounce(fn,delay){
// 设定一个变量，没有执行定时器时为null
 let timer = null;
 return function(){
 if(timer) clearTimeout(timer);
 timer = setTimeout(()=>{
// 改变this指向为传入的函数
 fn.apply(this,arguments);
// 清空定时器
 timer = null;
 },delay);
 }
}

2. 节流（throttle）

实现原理: 函数被触发时，只响应在某个固定时间段内的第一次请求，后续的请求都不响应，直到下个时间周期，继续响应下个周期内的第一次请求，周而复始。

通俗来讲就是:持续触发(事件)也执行，不过执行的频率变低了.（例如打散弹枪）

实现思路： 第一次先设定一个变量true，第二次执行这个函数时，会判断变量是否true，是则返回。当第一次的定时器执行完函数最后会设定变量为flase。那么下次判断变量时则为flase，函数会依次运行。

// fn为传入的函数 delay为需要传入的延迟的时间
function throttle(fn,delay){
 // 设定一个变量，没有执行定时器时为null
 let timer = null;
 return function(){
 // 这个定时器存在时，则表示定时器已经在运行中，直接return
 if(timer) return;
 timer = setTimeout(()=>{
 fn.apply(this,arguments);
 timer = null;
 },delay);
 }
}