2020-06-17 每日一题：防抖和节流函数
本文也在我的blog上发布：跳转博客
题目
const debounse = (fn,delay)=>{
// 介绍防抖函数原理，并实现
}
const throttle = (fn,delay=500)=>{
// 介绍节流函数原理，并实现
}
引子
第一次接触防抖和节流函数是在大一完成web学习的第一个项目时，当时需要对鼠标滚轮进行监听，但是滚轮一次会触发很多很多次事件。由此接触到了防抖和节流函数。所以如果用一句话概括一下防抖和节流函数，我的表达就是：防止一个函数被连续快速多次触发，消耗太多资源或者造成预期外的效果。
防抖函数or节流函数？
防抖函数和节流函数都可以防止操作被连续触发，那么他们的区别是什么呢？
防抖函数：在事件触发n秒后再执行回调，如果这期间再次触发，则重新计时
节流函数：在一定时间内，只能触发一次函数
倘若一个按钮绑定了某一事件，而这个按钮被连续不断的快速点击，防抖函数会等到停止点击n秒后才触发，而防抖函数每隔一段时间就会被触发一次。
所以由此可知，防抖函数和节流函数的使用场景分别为：
防抖函数：需要保证提交信息为最新的时候，比如登录，滑块等。
节流函数：需要一个较缓的频率提交一直变化的值时，如搜索推荐项。
代码实现：
const debounse = (fn,delay)=>{
let timer = null;
return (...args)=>{
//清除定时器
clearTimeout(timer)
timer = setTimeout(()=>{
fn.apply(this.args);
},delay)
}
}
const throttle = (fn,delay=500)=>{
let flag = true;
return (...args)=>{
if(!flag){
return;
}
flag = false;
// 开始计时
setTimeout(()=>{
fn.applay(this,args);
flag = true;
},delay);
}
}
