防抖和节流
假如有一个饮水机，规定按下按钮之后2秒后开始出水，有个闲得x疼的人很快的按按钮10秒，饮水机会作何反应呢？
防抖（debounce）：在按下按钮和出水的这2秒内如果还有人按按钮，饮水机会重新开始计算2秒，也就是说总是以最新的操作为基准来计算时间
节流：即使被人不间断的按按钮了10秒钟，但是饮水机依然不紧不慢的2s出一次水，也就是说不管外部操作的多快，饮水机总会有自己的频率
代码实现
防抖
function debounce(func, delay) { var timer; return function() { clearTimeout(timeout); timer = setTimeout(function(){ func(); },delay) }; }; 复制代码
节流
function throttle(fn, threshhold) { var timer var start = Date.now(); return function () { var curr = Date.now(); clearTimeout(timer) if(curr - start >= threshhold){ fn() start = curr }else{ timer = setTimeout(function(){ fn() }, threshhold); } } } 复制代码
说一个神器：可视化的防抖和节流，以动画的形式看到两者的区别
使用场景
防抖：频繁操作但是只需要响应最后一次即可
- 输入框验证，只需要对最后一次输入事件作出验证即可
- resize事件
- ...
节流：调节频率，以一定的频率去响应
- 搜索联想
- 响应拖拽
- ...
