今天是一个美好的开始
每日一学，作为前端小白的我，励志提升js基础，从今日开始我的前端复习之路。
背景
频繁触发回调导致的大量计算会引发页面的抖动甚至卡顿。为了规避这种情况，我们需要一些手段来控制事件被触发的频率。就是在这样的背景下，throttle（事件节流）和 debounce（事件防抖）出现了。
事件防抖
在高频触发回调函数时，防抖操作使回调函数在一定时间间隔内，再次触发会清空定时器，并重新计时；计时结束后输出一次结果。
事件节流
在高频触发回调函数时，节流操作使回调函数在每隔一段时间定期执行一次，时间间隔内再触发，不会重新执行。
应用场景
- 监听 scroll、mousemove 等事件 - 节流（每隔一秒计算一次位置）
- 监听浏览器窗口 resize 操作 - 防抖（只需计算一次）
- 键盘文本输入的验证 - 防抖（连续输入文字后发送请求进行验证，验证一次就好）
- 提交表单 - 防抖（多次点击变为一次）
共同点
相同点都是需要设置一个回调函数及周期时间，区别在于：
防抖是在停止触发后的100ms，执行一次（在此时间段内，只要不停止触发，理论上就永远不会触发回调）
节流是在不断的触发过程中，每隔100ms就执行一次。
防抖实现：
function debounce(callback,delay) {
var timer = null;
return function () {
var args = arguments;
var that = this;
clearTimeout(timer);
timer = setTimeout(function () {
callback.apply(that, args);
}, delay);
};
};
// 使用方式
function dd(){
console.log('dd');
}
window.onresize = debounce(dd,500);
节流实现：
function throttle(callback,delay){
var timerId = null;
return function(){
if (timerId) {
return;
}
var args = arguments;
var that = this;
timerId = setTimeout(() => {
timerId = null;
callback.apply(that,args);
}, delay);
}
}
