前因：用户操作频繁的触发事件执行，而对于DOM操作、资源加载等耗费性能的处理，很可能导致页面卡顿，甚至浏览器崩溃。
防抖 debounce
概念：函数防抖是在函数需要频繁触发情况下，只有足够空闲时间，才执行一次。
场景：
- 实时搜索
keyup - 拖拽
mousemove
// 封装防抖函数
// 每wait毫秒才执行一次
// handler 需要执行的方法
function debounce(handler, wait) {
var timer = null;
return function(){
var self = this; // this ==> window
var _arg = arguments;
clearTimeout(timer);
timer = setTimeout(function(e){
console.log(arguments)
handler.apply(self, _arg)
}, wait);
}
}
节流 throttle
概念：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行
场景：
- 窗口调整
resize - 页面滚动
scroll - 秒杀
mousedown
// 节流
// 判断点击前后的时间差，如果大于等待事件wait，就执行函数
// handler 需要执行的方法
function throttle(handler, wait) {
var lastTime = 0;
return function (e){
var newTime = new Date().getTime();
if(newTime - lastTime > wait) {
handler.apply(this, arguments);
lastTime = newTime;
}
}
}
