防抖
原理：在事件被触发的n秒之后执行回调，若在n秒内再次触发则重新计算事件。
-
适用场景：
搜索框联想场景：防止每次输入发送请求，只发送最后一次。
按钮提交场景：按钮重复点击，只执行最后一次提交
-
实现：
function debounce(fn, wait) { let timeout; return function () { const context = this; const args = arguments; clearTimeout(timeout); timeout = setTimeout(function () { fn.apply(context, args) }, wait) } }
节流
原理：在一段时间内，只触发一次函数，若触发多次则只有一次生效。
-
适用场景：
拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
缩放场景：监控浏览器resize
-
实现：当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。
function throttle(fn, wait){ let timeout; return function(){ const _this = this; const args = arguments; if(!timeout){ timeout = setTimeout(function(){ timeout = null; fn.apply(_this, args); }, wait) } } }
