1.节流（throttle）
定义：先定义个执行周期，当时间执行时间大于等于执行周期，那就进入新的周期；如果小于执行周期就等事件执行结束后执行回调
案例：throttle 就好比将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出；
function throttle(fn, gapTime) { //节流
let _lastTime = null;
return function () {
let _nowTime = + new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
fn();
_lastTime = _nowTime
}
}
};
//resize测试
function task() {
console.log(window.document.body.clientWidth)
}
window.addEventListener('resize',debounce(task,200),false)
2.防抖（debounce）
定义：防抖就是一个事件完成后n毫秒之后再执行回调，如果这n毫秒内又重复一次事件，就重新计算时间；
举例：debounce你在进入电梯后发现这时不远处走来了了一个人，等 10 秒钟，这个人进电梯后不远处又有个妹纸姗姗来迟，怎么办，再等 10 秒，于是妹纸上电梯时又来了一对好基友...，作为感动中国好码农，你要每进一个人就等 10 秒，直到没有人进来，10 秒超时，电梯开动。
function debounce(fn, wait) { //防抖
var timer = null;
return function () {
var context = this
var args = arguments
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function () {
fn.apply(context, args)
}, wait)
}
};
//resize测试
function task() {
console.log(window.document.body.clientWidth)
}
window.addEventListener('resize',debounce(task,200),false)
总结
throttle 可以想象成阀门一样定时打开来调节流量，它适合指定每隔一定时间间隔内执行不超过一次的情况；
例如 拖动滚动条（scroll）,resize，移动鼠标的事件处理等
debounce 可以想象成把很多事件压缩组合成了一个事件，它适合只执行一次的情况；
例如 搜索框中的自动完成。在停止输入后提交一次 ajax 请求;keyup事件等
