防抖和节流
*本文参考
https://blog.csdn.net/hupian1989/article/details/80920324
&
https://blog.csdn.net/github_39132847/article/details/82984971
这里只是做一下复述，以便自己能够理解的更通透，原文图文并茂更宜理解*
场景
如鼠标移动事件onmousemove ,滚动事件onscroll，窗口大小改变onresize，输入框输入oninput。
结果
这些瞬间的操作都会导致这些事件被高频触发 ，如果响应事件逻辑稍微复杂点，会导致页面卡顿，假死等现象。
方案
防抖和节流是是针对响应跟不上触发频率的两种解决方案。
debounce 防抖（两次事件触发之间满足一定的空闲时间，响应动作才执行一次）
基本思想
设定一个延迟值，当事件触发时，如果是在延迟值内再次触发则重新设置延迟，只有在延迟时间结束才会执行响应动作，也就是如果在指定的周期内频繁触发事件，响应动作是不会频繁执行的，只有周期时间到了才会执行。
后期又扩展了前缘debounce，即执行动作在前，然后设定周期，周期内有事件被触发，不执行动作，且周期重新设定。
业务场景
A：百度搜索。一般搜索绑定输入事件（每次触发输入事件都会触发），如果触发一下就搜索一次，就会给服务器造成巨大压力。所以百度搜索利用防抖：当用户一直在输入的时候，比如说规定时间0.2秒，0.2秒内触发输入事件触发五次，那么这期间都不会触发远程搜索，当某一次输入后停顿满0.2秒才会去触发远程搜索。
B、地图加载：地图的加载是很缓慢的，一般只加载一定范围内的，然后等用户拖动地图到一个之前没加载的地方时，这个时候地图就该加载新的一部分。
代码
版本一：(缺陷：需要高频的创建定时器)
let debounce = (fn, wait) => {
let timer, timeStamp = 0
let context, args
let run = () => {
timer = setTimeout( () => {
fn.apply(context, args)
}, wait)
}
let clean = () => {
clearTimeout(timer);
}
// 逻辑处理
return function(){
context = this
args = arguments
let now = (new Date()).getTime()
if(now - timeStamp < wait) {
// 在wait 值内 需要重置。先清除定时器，再重置wait值
clean()
run()
} else {
// 执行 fn（响应方法）
run()
}
}
}
版本二：（对版本一的优化，逻辑判断放在定时器里）
周期内有新事件触发时，重置定时器开始时间戳，定时器执行时，判断开始时间戳，若开始时间戳被推后，重新设定延时定时器
let debounce = (fn, wait) => {
let timer, startTimeStamp = 0
let context, args
let run = (timerInterval) => {
//定时器执行时
timer = setTimeout(() => {
let now = (new Date()).getTime()
let interval = now - startTimeStamp
//开始时间戳被推后（即startTimeStamp被重新赋值会变大，所以interval会变小）
if(interval < timerInterval){
startTimeStamp = now
//重新设定延时定时器
run(timerInterval-interval)
}else{
fn.apply(context,args)
clearTimeout(timer)
timer = null
}
}, timerInterval)
}
return function(){
context = this
args = arguments
let now = (new Date()).getTime()
//新事件触发时，重置定时器开始时间戳
startTimeStamp = now
if( !timer ){
run(wait)
}
}
}
版本三：（在版本二的基础上加上前缘debounce）
let debounce = (fn, wait, immediate=false) => {
let timer, startTimeStamp = 0
let context, args
let run = (timerInterval) => {
//定时器执行时
timer = setTimeout(() => {
let now = (new Date()).getTime()
let interval = now - startTimeStamp
//开始时间戳被推后（即startTimeStamp被重新赋值会变大，所以interval会变小）
if(interval < timerInterval){
startTimeStamp = now
//重新设定延时定时器
run(timerInterval-interval)
}else{
if(!immediate){
fn.apply(context,args);
}
clearTimeout(timer)
timer = null
}
}, timerInterval)
}
return function(){
context = this
args = arguments
let now = (new Date()).getTime()
//新事件触发时，重置定时器开始时间戳
startTimeStamp = now
if( !timer ){
if(immediate) {
fn.apply(context,args);
}
run(wait)
}
}
}
throttling 节流（规定的时间内，多次触发事件，响应动作只执行一次）
业务场景
A、很多抢票、抢购这类操作很多都加了节流，为了避免用户大量点击造成服务器压力，当固定时间内，不论点击多少次，只执行一次抢的动作。
B、很多界面操作，会需要更新当前界面的数据，如果这类操作非常的高频，数据就可以采用节流的形式。
代码（考虑情况较简单，复杂情况可参考underscope 的_.throttle
）
let throttling = (fn, wait, immediate) => {
let timer, timeStamp=0;
let context, args;
let run = () => {
timer=setTimeout(()=>{
if(!immediate){
fn.apply(context,args);
}
clearTimeout(timer);
timer=null;
},wait);
}
return function () {
context=this;
args=arguments;
if(!timer){
console.log("throttle, set");
if(immediate){
fn.apply(context,args);
}
run();
}else{
console.log("throttle, ignore");
}
}
Lodash工具库里也有防抖节流的方法https://www.lodashjs.com/
debounce和throttling 各有特点，
在不同 的场景要根据需求合理的选择策略。
如果事件触发是高频但是有停顿时，可以选择debounce；
在事件连续不断高频触发时，只能选择throttling，
因为debounce可能会导致动作只被执行一次，界面出现跳跃。